css定位 position: sticky
更新时间:2023-05-25 21:55
规则:
https://segmentfault.com/a/1190000018861422
- 设置了position: sticky的元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
- 当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动(相当于此时fixed定位)。
- 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于viewport来计算元素的偏移量。
特性表现:
- 父级元素不能有任何
overflow:visible
以外的overflow设置,否则没有粘滞效果。因为改变了滚动容器(即使没有出现滚动条)。因此,如果你的position:sticky
无效,看看是不是某一个祖先元素设置了overflow:hidden
,移除之即可。 2019-05-22新增
父级元素设置和粘性定位元素等高的固定的height
高度值,或者高度计算值和粘性定位元素高度一样,也没有粘滞效果。- 同一个父容器中的sticky元素,如果定位值相等,则会重叠;如果属于不同父元素,且这些父元素正好紧密相连,则会鸠占鹊巢,挤开原来的元素,形成依次占位的效果。
- sticky定位,不仅可以设置
top
,基于滚动容器上边缘定位;还可以设置bottom
,也就是相对底部粘滞。如果是水平滚动,也可以设置left
和right
值。
https://segmentfault.com/a/1190000018861422
上一篇:JavaScript常用的简写技巧 下一篇:node-sass 安装失败的解决办法