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
位置,并被告知粘贴到该位置。inherit
:position
值不会级联,因此可以用来专门强制它并从其父元素继承位置值。
绝对
如果子元素具有 absolute
值,则父元素的行为将如同子元素不存在一样。
.element {
position: absolute;
}
当尝试设置其他值(如 left
、bottom
和 right
)时,会发现子元素不是响应其父元素的尺寸,而是响应文档。
.element {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
要使子元素相对于其父元素绝对定位,需要在父元素本身上设置此属性。
.parent {
position: relative;
}
现在,诸如 left
、right
、bottom
和 top
之类的属性将引用父元素,因此,如果使子元素透明,则可以看到它正好位于父元素的底部。
了解有关 position: relative
和 position: absolute
在 DigitalOcean 上的更多信息。
固定
fixed
值类似于 absolute
,因为它可以帮助您相对于文档将元素定位在任何位置,但是此值不受滚动影响。请参阅下面演示中的子元素,以及在滚动后它如何继续粘贴到页面底部。
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4 | 2 | 7 | 12 | 3.1 |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 3 | 8 |
粘性
sticky
值就像 relative
和 fixed
值之间的折衷方案。在撰写本文时,它目前是一个实验性值,这意味着它不是官方规范的一部分,并且仅被部分浏览器采用。换句话说,在实际生产网站上使用它可能不是一个好主意。
它有什么作用?它允许您将元素相对于文档上的任何内容进行定位,然后,一旦用户滚动到视口中的某个特定点,将元素的位置固定到该位置,以便它像具有 fixed
值的元素一样持续显示。
请看下面的示例
.element {
position: sticky; top: 50px;
}
当视口滚动位置到达元素距离视口顶部50px
的位置时,该元素将保持相对定位。此时,元素变为粘性定位,并保持在屏幕顶部50px
的位置。
下面的演示说明了这一点,其中顶部导航默认为relative
定位,第二个导航设置为在视口的最顶部sticky
定位。请注意,在撰写本文时,此演示仅在 Chrome、Safari 和 Opera 中有效。
此浏览器支持数据来自Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
91 | 59 | 否 | 91 | 7.1* |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 8* |
了解更多关于position: sticky
的信息,请访问 DigitalOcean。
非常好!
幸运的是我指出来了。
当我年轻时刚开始学习网页开发时,我本可以使用本指南来清楚地阐明元素定位的差异。这个网站太棒了!
确实如此。我正在入门,到目前为止,这个网站已经解答了我所有的问题,并且我也能够理解得很清楚。耶!
嘿,Chriss,你的网站总是给我最好的答案,你准备得很充分。太棒了!
CSS 位置的解释非常棒。非常感谢。
嗨,
我第一次使用
position:
,但当我尝试时,它不起作用,所以我谷歌了一下,找到了这个网站,当我浏览这个网站时,我读到了z-index
…………这解决了我的问题!
非常感谢!
现在是2015年,人们仍在寻找这些内容,因为很多人仍在使用 IE8。不幸的是,我正在寻找的是如何让 IE8 在使用 position:absolute 时正常工作。Position:relative 似乎不允许我添加 top/bottom/left/right 来影响某个东西的位置。好吧,探索仍在继续。但这真是很棒的信息,非常有帮助。谢谢!
在 Chrome 中。
绝对定位示例 (example Absolute)
如果设置父元素 display:flex
子元素的行为不可预测
那么,如何在父元素中的文本之后设置子元素稳定,就像示例中那样,使用 flex 父元素?
感谢这些文章!我使用这些信息修复了一些网站的定位问题。你节省了我一些时间和麻烦。 :)
一条批评:你在本文和其他文章中都说过 position 属性“不会级联”。你是指它不会继承还是不继承?级联和继承不是一回事。我被 position 属性不会级联的想法绊倒了一点……
粘性定位太棒了!有没有消息说这是否会导致
position
可动画?如果能帮助粘性元素在切换到/从固定状态时进行视觉转换就好了。固定元素并不总是相对于文档定位!
“当祖先元素的 transform、perspective 或 filter 属性设置为除 none 之外的任何值时,该祖先元素将用作容器,而不是视口。”
参见:https://mdn.org.cn/en-US/docs/Web/CSS/position
感谢参考!
这很有趣!我试图实现这样的功能:让一个元素附加到可滚动容器的底部。但是,除了固定到浏览器窗口的元素之外,固定到“已转换”容器的元素将与容器内容一起滚动。
实际上有没有一种方法可以使元素相对于另一个 HTML 元素真正固定定位?
你好,你所说的性能问题指的是什么?具体指的是什么?能否具体说明这个主题?(以便进一步搜索)
哇……非常非常有帮助。我来这里是为了复习一下我对定位的知识,并没有失望。简洁明了,重点突出,并提供了很好的示例。
我喜欢这个想法:“元素从文档流中移除”。这很有道理!
如果有人感兴趣,我创建了一个 CSS 位置测试工具,可以立即在布局中可视化位置变化。https://kilianso.com/css_position
感谢你的工具,Kilian。对于像我这样的新手来说,它非常有帮助。
“sticky” 值目前还在实验阶段吗?
不完全是,它得到了很好的支持。
https://caniuse.cn/css-sticky
为什么绝对定位的元素会失去100%的宽度?