position的六种属性及特点
1.static:无定位
- 元素出现在正常流中
- 没有设置定位方式时,默认为static,按照文档的流式定位,将元素放在一个合适的位置
- 在不同的分辨率下采用流式定位能够很好地自适应,去得相对较好的布局效果
流式布局就是页面元素的宽度按照屏幕的分辨率进行调整,而页面的整体布局不变
2.inherit:继承父元素
3.relative:相对定位
4.absolute:绝对定位
- 不脱离文档流,占据它原来的位置
- 不影响元素的本身特性,没有偏移量时不会影响元素
- 相对于自身定位
- 可以通过z-index来提升层级,从而改变元素的覆盖关系,值大者在上
- 脱离文档流,不占位
- 改变元素的特性(即内联元素设置宽高时支持宽高)
- 相对于static定位以外的父元素进行定位
- 可以通过z-index来提升层级,从而改变元素的覆盖关系,值大者在上
5.fixed:固定定位
6.sticky:粘性定位
- 脱离文档流,不占位
- 相对于可视窗进行定位
- 可以通过z-index来提升层级,从而改变元素的覆盖关系,值大者在上
- 不脱离文档流
- 元素先按照普通文档流定位,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。
- 元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
- 特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同
- 可以用来实现头部导航栏固定
- 生效规则:
position:sticky 的生效是有一定的限制的,总结如下:
(1)须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
- 并且 top 和 bottom 同时设置时,top 生效的优先级高,left 和 right 同时设置时,left 的优先级高。
(2)设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible,否则 position:sticky 不会生效。这里需要解释一下:
- 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden,则父容器无法进行滚动,所以 position:sticky 元素也不会有滚动然后固定的情况。
- 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed,则元素相对父元素进行定位,而不会相对 viewprot 定位。
(3)达到设定的阀值。这个还算好理解,也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。