position
试一试
语法
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
/* Global values */
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;
Values
static
-
元素根据文档的 正常流 定位。
top
、right
、bottom
、left
和z-index
属性不起作用。 这是默认值。 relative
-
元素根据文档的正常流定位,然后根据
top
、right
、bottom
和left
的值相对于自身进行偏移。 偏移不会影响任何其他元素的位置; 因此,页面布局中为元素分配的空间与position
为static
时相同。当
z-index
的值为非auto
时,此值会创建一个新的 堆叠上下文。 它对table-*-group
、table-row
、table-column
、table-cell
和table-caption
元素的影响未定义。 absolute
-
元素从正常的文档流中移除,并且在页面布局中不会为元素创建空间。 元素相对于其最近的定位祖先(如果有)或相对于初始 包含块 定位。 其最终位置由
top
、right
、bottom
和left
的值确定。 fixed
-
该元素将从普通文档流中移除,并且在页面布局中不会为该元素创建任何空间。该元素相对于其初始包含块定位,在视觉媒体的情况下,包含块就是视窗。其最终位置由
top
、right
、bottom
和left
的值决定。此值始终创建一个新的堆叠上下文。在印刷文档中,该元素在每一页的相同位置。
sticky
-
该元素根据文档的正常流程定位,然后相对于其最近的滚动祖先和包含块(最近的块级祖先)偏移,包括与表格相关的元素,基于
top
、right
、bottom
和left
的值。偏移不会影响任何其他元素的位置。此值始终创建一个新的堆叠上下文。请注意,粘性元素会“粘贴”到其最近的具有“滚动机制”的祖先(当
overflow
为hidden
、scroll
、auto
或overlay
时创建),即使该祖先不是最近的实际滚动祖先。注意: 至少需要设置一个inset属性(
top
、inset-block-start
、right
、inset-inline-end
等)为非auto
值,以便元素在该轴上变为粘性。如果一个轴的两个inset
属性都设置为auto
,则在该轴上,sticky
值将表现为relative
。
描述
定位类型
- 定位元素是指其计算的
position
值为relative
、absolute
、fixed
或sticky
的元素。(换句话说,除了static
之外的所有元素。) - 相对定位元素是指其计算的
position
值为relative
的元素。top
和bottom
属性指定其相对于其正常位置的垂直偏移量;left
和right
属性指定其相对于其正常位置的水平偏移量。 - 绝对定位元素是指其计算的
position
值为absolute
或fixed
的元素。top
、right
、bottom
和left
属性指定其相对于其包含块边缘的偏移量。(包含块是元素相对于其定位的祖先。)如果元素有边距,边距会添加到偏移量中。该元素为其内容建立一个新的块级格式化上下文(BFC)。 - 粘性定位元素是指其计算的
position
值为sticky
的元素。它被视为相对定位,直到其包含块越过指定的阈值(例如,将top
设置为除auto以外的值)在它的流根(或它在其内滚动的容器)中,此时它被视为“粘贴”,直到遇到其包含块的相对边缘。
大多数情况下,具有height
和width
设置为auto
的绝对定位元素,其大小将设置为适合其内容。但是,非替换的绝对定位元素可以通过指定top
和bottom
并将height
保留为未指定(即auto
)来使其填充可用垂直空间。同样,它们可以通过指定left
和right
并将width
保留为auto
来使其填充可用水平空间。
除了刚刚描述的(绝对定位元素填充可用空间)情况
无障碍访问
确保使用absolute
或fixed
值定位的元素在页面缩放以增大文本大小时不会遮挡其他内容。
性能和可访问性
包含fixed
或sticky
内容的滚动元素可能会导致性能和可访问性问题。当用户滚动时,浏览器必须在新的位置重新绘制粘性或固定内容。根据需要重新绘制的内容、浏览器的性能和设备的处理速度,浏览器可能无法以 60 fps 的速度管理重新绘制,这会导致对有敏感度的人的可访问性问题,并对所有人造成卡顿。一个解决方案是在定位元素中添加will-change: transform
,以便在它自己的图层中渲染元素,从而提高重新绘制速度,从而提高性能和可访问性。
正式定义
正式语法
示例
相对定位
相对定位元素相对于其在文档中的正常位置偏移给定量,但偏移不会影响其他元素。在下面的示例中,请注意其他元素是如何放置的,就好像“Two”占据了其正常位置的空间。
HTML
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
CSS
* {
box-sizing: border-box;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
position: relative;
top: 20px;
left: 20px;
background: blue;
}
绝对定位
相对定位的元素仍然保留在文档的正常流程中。相反,绝对定位的元素将从流程中移除;因此,其他元素的定位就好像它不存在一样。绝对定位的元素相对于其最近的定位祖先(即,最近的非static
祖先)进行定位。如果不存在定位祖先,则它相对于ICB(初始包含块 - 另请参阅W3C 定义)进行定位,ICB是文档根元素的包含块。
HTML
<h1>Absolute positioning</h1>
<p>
I am a basic block level element. My adjacent block level elements sit on new
lines below me.
</p>
<p class="positioned">
By default we span 100% of the width of our parent element, and we are as tall
as our child content. Our total width and height is our content + padding +
border width/height.
</p>
<p>
We are separated by our margins. Because of margin collapsing, we are
separated by the width of one of our margins, not both.
</p>
<p>
inline elements <span>like this one</span> and <span>this one</span> sit on
the same line as one another, and adjacent text nodes, if there is space on
the same line. Overflowing inline elements
<span>wrap onto a new line if possible — like this one containing text</span>,
or just go on to a new line if not, much like this image will do:
<img src="long.jpg" />
</p>
CSS
* {
box-sizing: border-box;
}
body {
width: 500px;
margin: 0 auto;
}
p {
background: aqua;
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
span {
background: red;
border: 1px solid black;
}
.positioned {
position: absolute;
background: yellow;
top: 30px;
left: 30px;
}
结果
固定定位
固定定位类似于绝对定位,区别在于元素的包含块是视窗建立的初始包含块,除非任何祖先的transform
、perspective
或filter
属性设置为除none
以外的值(参见CSS 变换规范),这将导致该祖先代替元素的包含块。这可以用来创建一个“浮动”元素,该元素无论滚动到哪里都保持在相同的位置。在下面的示例中,框“One”固定在页面顶部 80 像素处,左侧 10 像素处。即使滚动后,它也相对于视窗保持在相同的位置。此外,当will-change
属性设置为transform
时,将建立一个新的包含块。
HTML
<div class="outer">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
ultrices ultrices, tempor et tellus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
ultrices ultrices, tempor et tellus.
</p>
<div class="box" id="one">One</div>
</div>
CSS
* {
box-sizing: border-box;
}
.box {
width: 100px;
height: 100px;
background: red;
color: white;
}
#one {
position: fixed;
top: 80px;
left: 10px;
background: blue;
}
.outer {
width: 500px;
height: 300px;
overflow: scroll;
padding-left: 150px;
}
结果
粘性定位
以下 CSS 规则将 id 为one
的元素定位为相对定位,直到视窗滚动到该元素距离顶部 10 像素时。超过该阈值后,该元素将固定在距离顶部 10 像素的位置。
#one {
position: sticky;
top: 10px;
}
带有粘性标题的列表
粘性定位的常见用途是用于字母顺序排列的列表中的标题。“B”标题将出现在以“A”开头的项目下方,直到它们被滚动出屏幕。而不是与其他内容一起滑出屏幕,“B”标题将固定在视窗顶部,直到所有“B”项目都被滚动出屏幕,此时它将被“C”标题覆盖,以此类推。
为了使粘性定位按预期工作,必须使用至少一个top
、right
、bottom
或left
指定阈值。否则,它将与相对定位无法区分。
HTML
<dl>
<div>
<dt>A</dt>
<dd>Andrew W.K.</dd>
<dd>Apparat</dd>
<dd>Arcade Fire</dd>
<dd>At The Drive-In</dd>
<dd>Aziz Ansari</dd>
</div>
<div>
<dt>C</dt>
<dd>Chromeo</dd>
<dd>Common</dd>
<dd>Converge</dd>
<dd>Crystal Castles</dd>
<dd>Cursive</dd>
</div>
<div>
<dt>E</dt>
<dd>Explosions In The Sky</dd>
</div>
<div>
<dt>T</dt>
<dd>Ted Leo & The Pharmacists</dd>
<dd>T-Pain</dd>
<dd>Thrice</dd>
<dd>TV On The Radio</dd>
<dd>Two Gallants</dd>
</div>
</dl>
CSS
* {
box-sizing: border-box;
}
dl > div {
background: #fff;
padding: 24px 0 0 0;
}
dt {
background: #b8c1c8;
border-bottom: 1px solid #989ea4;
border-top: 1px solid #717d85;
color: #fff;
font:
bold 18px/21px Helvetica,
Arial,
sans-serif;
margin: 0;
padding: 2px 0 0 12px;
position: -webkit-sticky;
position: sticky;
top: -1px;
}
dd {
font:
bold 20px/45px Helvetica,
Arial,
sans-serif;
margin: 0;
padding: 0 0 0 12px;
white-space: nowrap;
}
dd + dd {
border-top: 1px solid #ccc;
}
结果
所有内边距边界都设置的粘性位置
以下示例演示了当所有内边距边界都设置时元素的行为。这里,我们有一个段落中的两个灯泡表情符号。灯泡使用粘性定位,内边距边界指定为距离顶部 50px,距离右侧 100px,距离底部 50px,距离左侧 50px。父 div 元素上的灰色背景标记了内边距区域。
HTML
Use scrollbars to put the light bulbs(💡) in the right place in the following
text:
<div>
<p>
The representation of an idea by a light bulb(<span class="bulb">💡</span>)
is a commonly used metaphor that symbolizes the moment of inspiration or the
birth of a new idea. The association between a light bulb and an idea can be
traced back to the invention of the incandescent light bulb(<span
class="bulb"
>💡</span
>) by Thomas Edison in the late 19th century. The light bulb is a powerful
symbol because it represents illumination, clarity, and the sudden
brightening of one's thoughts or understanding. When someone has an idea, it
is often described as a light bulb turning on in their mind, signifying a
moment of insight or creativity. The image of a light bulb also suggests the
idea of energy, power, and the potential for growth and development.
</p>
</div>
CSS
.bulb {
position: sticky;
inset: 50px 100px 50px 100px;
}
div {
/* mark area defined by the inset boundaries using gray color */
background: linear-gradient(#9999, #9999) 100px 50px / 192px 100px no-repeat;
}
结果
当您将两个灯泡放在合适的位置时,您会注意到它们在内边距区域内是相对定位的。当您将它们移出内边距区域时,它们会固定(粘性)到该方向的内边距边界。
规范
规范 |
---|
CSS 定位布局模块级别 3 # position-property |
浏览器兼容性
BCD 表格仅在浏览器中加载