position

**position** CSS 属性设置元素在文档中的定位方式。 toprightbottomleft 属性确定定位元素的最终位置。

试一试

语法

css
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

元素根据文档的 正常流 定位。 toprightbottomleftz-index 属性不起作用。 这是默认值。

relative

元素根据文档的正常流定位,然后根据 toprightbottomleft 的值相对于自身进行偏移。 偏移不会影响任何其他元素的位置; 因此,页面布局中为元素分配的空间与 positionstatic 时相同。

z-index 的值为非 auto 时,此值会创建一个新的 堆叠上下文。 它对 table-*-grouptable-rowtable-columntable-celltable-caption 元素的影响未定义。

absolute

元素从正常的文档流中移除,并且在页面布局中不会为元素创建空间。 元素相对于其最近的定位祖先(如果有)或相对于初始 包含块 定位。 其最终位置由 toprightbottomleft 的值确定。

z-index 的值为非 auto 时,此值会创建一个新的 堆叠上下文。 绝对定位盒子的边距不会与其他边距 塌陷

fixed

该元素将从普通文档流中移除,并且在页面布局中不会为该元素创建任何空间。该元素相对于其初始包含块定位,在视觉媒体的情况下,包含块就是视窗。其最终位置由toprightbottomleft的值决定。

此值始终创建一个新的堆叠上下文。在印刷文档中,该元素在每一页的相同位置。

sticky

该元素根据文档的正常流程定位,然后相对于其最近的滚动祖先包含块(最近的块级祖先)偏移,包括与表格相关的元素,基于toprightbottomleft的值。偏移不会影响任何其他元素的位置。

此值始终创建一个新的堆叠上下文。请注意,粘性元素会“粘贴”到其最近的具有“滚动机制”的祖先(当overflowhiddenscrollautooverlay时创建),即使该祖先不是最近的实际滚动祖先。

注意: 至少需要设置一个inset属性(topinset-block-startrightinset-inline-end等)为非auto值,以便元素在该轴上变为粘性。如果一个轴的两个inset属性都设置为auto,则在该轴上,sticky值将表现为relative

描述

定位类型

  • 定位元素是指其计算position值为relativeabsolutefixedsticky的元素。(换句话说,除了static之外的所有元素。)
  • 相对定位元素是指其计算position值为relative的元素。topbottom属性指定其相对于其正常位置的垂直偏移量;leftright属性指定其相对于其正常位置的水平偏移量。
  • 绝对定位元素是指其计算position值为absolutefixed的元素。toprightbottomleft属性指定其相对于其包含块边缘的偏移量。(包含块是元素相对于其定位的祖先。)如果元素有边距,边距会添加到偏移量中。该元素为其内容建立一个新的块级格式化上下文(BFC)。
  • 粘性定位元素是指其计算position值为sticky的元素。它被视为相对定位,直到其包含块越过指定的阈值(例如,将top设置为除auto以外的值)在它的流根(或它在其内滚动的容器)中,此时它被视为“粘贴”,直到遇到其包含块的相对边缘。

大多数情况下,具有heightwidth设置为auto的绝对定位元素,其大小将设置为适合其内容。但是,非替换的绝对定位元素可以通过指定topbottom并将height保留为未指定(即auto)来使其填充可用垂直空间。同样,它们可以通过指定leftright并将width保留为auto来使其填充可用水平空间。

除了刚刚描述的(绝对定位元素填充可用空间)情况

  • 如果同时指定了topbottom(技术上,不是auto),则top优先。
  • 如果同时指定了leftright,当directionltr(英语、水平日语等)时,left优先;当directionrtl(波斯语、阿拉伯语、希伯来语等)时,right优先。

无障碍访问

确保使用absolutefixed值定位的元素在页面缩放以增大文本大小时不会遮挡其他内容。

性能和可访问性

包含fixedsticky内容的滚动元素可能会导致性能和可访问性问题。当用户滚动时,浏览器必须在新的位置重新绘制粘性或固定内容。根据需要重新绘制的内容、浏览器的性能和设备的处理速度,浏览器可能无法以 60 fps 的速度管理重新绘制,这会导致对有敏感度的人的可访问性问题,并对所有人造成卡顿。一个解决方案是在定位元素中添加will-change: transform,以便在它自己的图层中渲染元素,从而提高重新绘制速度,从而提高性能和可访问性。

正式定义

初始值static
应用于所有元素
继承
计算值如指定
动画类型离散
创建堆叠上下文

正式语法

position = 
static |
relative |
absolute |
sticky |
fixed |
<running()>

<running()> =
running( <custom-ident> )

示例

相对定位

相对定位元素相对于其在文档中的正常位置偏移给定量,但偏移不会影响其他元素。在下面的示例中,请注意其他元素是如何放置的,就好像“Two”占据了其正常位置的空间。

HTML

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

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

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

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;
}

结果

固定定位

固定定位类似于绝对定位,区别在于元素的包含块是视窗建立的初始包含块,除非任何祖先的transformperspectivefilter属性设置为除none以外的值(参见CSS 变换规范),这将导致该祖先代替元素的包含块。这可以用来创建一个“浮动”元素,该元素无论滚动到哪里都保持在相同的位置。在下面的示例中,框“One”固定在页面顶部 80 像素处,左侧 10 像素处。即使滚动后,它也相对于视窗保持在相同的位置。此外,当will-change属性设置为transform时,将建立一个新的包含块。

HTML

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

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 像素的位置。

css
#one {
  position: sticky;
  top: 10px;
}

带有粘性标题的列表

粘性定位的常见用途是用于字母顺序排列的列表中的标题。“B”标题将出现在以“A”开头的项目下方,直到它们被滚动出屏幕。而不是与其他内容一起滑出屏幕,“B”标题将固定在视窗顶部,直到所有“B”项目都被滚动出屏幕,此时它将被“C”标题覆盖,以此类推。

为了使粘性定位按预期工作,必须使用至少一个toprightbottomleft指定阈值。否则,它将与相对定位无法区分。

HTML
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 &amp; The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>
CSS
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
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
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 表格仅在浏览器中加载

另请参见