position

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!

position 属性可以帮助您操作元素的位置,例如

.element {
  position: relative;
  top: 20px;
}

相对于其原始位置,上面的元素现在将从顶部向下偏移 20px。如果要对这些属性进行动画处理,我们可以看到这给了我们多少控制权(尽管出于性能原因,这不是一个好主意)

relative 只是 position 属性的六个值之一。以下是其他值

  • static:每个元素默认都具有静态位置,因此元素将保留在正常的页面流中。因此,如果设置了 left/right/top/bottom/z-index,则该元素将不会受到任何影响。
  • relative:元素的原始位置保留在文档流中,就像 static 值一样。但现在 left/right/top/bottom/z-index 将起作用。位置属性会“轻微调整”元素从原始位置到该方向。
  • absolute:元素从文档流中移除,其他元素的行为就像它不存在一样,同时所有其他位置属性都将对其起作用。
  • fixed:元素像绝对定位元素一样从文档流中移除。事实上,它们的行为几乎相同,只是固定定位的元素始终相对于文档,而不是任何特定的父元素,并且不受滚动影响。
  • sticky:元素被视为 relative 值,直到视口的滚动位置到达指定的阈值,此时元素将采用 fixed 位置,并被告知粘贴到该位置。
  • inheritposition 值不会级联,因此可以用来专门强制它并从其父元素继承位置值。

绝对

如果子元素具有 absolute 值,则父元素的行为将如同子元素不存在一样。

.element {
  position: absolute;
}

当尝试设置其他值(如 leftbottomright)时,会发现子元素不是响应其父元素的尺寸,而是响应文档。

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

要使子元素相对于其父元素绝对定位,需要在父元素本身上设置此属性。

.parent {
  position: relative;
}

现在,诸如 leftrightbottomtop 之类的属性将引用父元素,因此,如果使子元素透明,则可以看到它正好位于父元素的底部。

了解有关 position: relativeposition: absolute 在 DigitalOcean 上的更多信息

固定

fixed 值类似于 absolute,因为它可以帮助您相对于文档将元素定位在任何位置,但是此值不受滚动影响。请参阅下面演示中的子元素,以及在滚动后它如何继续粘贴到页面底部。

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
427123.1

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712738

粘性

sticky 值就像 relativefixed 值之间的折衷方案。在撰写本文时,它目前是一个实验性值,这意味着它不是官方规范的一部分,并且仅被部分浏览器采用。换句话说,在实际生产网站上使用它可能不是一个好主意。

它有什么作用?它允许您将元素相对于文档上的任何内容进行定位,然后,一旦用户滚动到视口中的某个特定点,将元素的位置固定到该位置,以便它像具有 fixed 值的元素一样持续显示。

请看下面的示例

.element {
  position: sticky; top: 50px;
}

当视口滚动位置到达元素距离视口顶部50px的位置时,该元素将保持相对定位。此时,元素变为粘性定位,并保持在屏幕顶部50px的位置。

下面的演示说明了这一点,其中顶部导航默认为relative定位,第二个导航设置为在视口的最顶部sticky定位。请注意,在撰写本文时,此演示仅在 Chrome、Safari 和 Opera 中有效。

此浏览器支持数据来自Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
9159917.1*

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271271278*

了解更多关于position: sticky的信息,请访问 DigitalOcean

更多信息