static 静态定位
如果省略 position 属性，浏览器就认为该元素是 static 定位；
每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置；
此时 top、right、bottom、left 和 z-index 属性无效；
relative 相对定位
相对于原位置（即 static 时的位置）进行偏移，元素不脱离文档流；
它必须搭配 top、right、bottom、left 这四个属性一起使用，用来指定偏移的方向和距离；
absolute 绝对定位
定位基点不能是 static 定位的父元素，否则定位基点就会变成整个网页首屏的根元素 html ，元素脱离文档流；
absolute 定位也必须搭配 top、right、bottom、left 这四个属性一起使用；
fixed 固定定位
相对于视口（viewport 浏览器窗口）进行偏移，这会导致元素的位置不随页面滚动而变化，好像固定在网页上⼀样，元素脱离文档流；
fixed 定位也必须搭配 top、right、bottom、left 这四个属性一起使用，位置是基于视口计算的；
- 如果属性同时设置，那么 top 的优先级高于 bottom ，left 的优先级高于 right；
- top、right、bottom、left 无需显式设置，fixed 定位也会生效；
sticky 粘连定位
sticky 定位可以被认为是 相对定位 和 固定定位 的混合；元素在跨越特定阈值前为相对定位，之后为固定定位；
sticky 生效的前提必须搭配 top、bottom、left、right 使用，不能省略，否则等同于 relative 定位：
- 原因是这四个属性用来定义 偏移距离 ，浏览器把它当作 sticky 的生效门槛；
- 具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与 sticky 元素的距离达到生效门槛，relative 定位自动切换为 fixed 定位；
- 等到父元素完全脱离视口时（即完全不可见），fixed 定位自动切换回 relative 定位；
案例演示：
- 比如，网页的搜索工具栏，初始加载时在自己的默认位置 （relative 定位）；
- 页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed 定位）；
- 等到页面重新向上滚动回到原位，工具栏也会回到默认位置；
打赏作者
您的打赏是我前进的动力
微信
支付宝
CSS 高级✍️ 隐藏元素的方式
上一篇
评论
