positon:sticky全面解析

·  阅读 611

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天,点击查看活动详情

sticky比喻材料的意思是粘性的,比喻人可以叫粘人的。

粘肯定有一个对象,在前端css样式规则里,sticky粘的是其最近的祖先滚动元素。

粘性效果sticky的两种情况

  • 元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor) 和 containing block (最近块级祖先 nearest block-level ancestor),包括 table-related 元素,基于toprightbottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。 所谓偏移量,就是如下图所示:

1659415988628.png

本文所说的对头也就是最近滚动或块级元素的最【左】边。这里偏移量的单位可以为px

相对最近滚动祖先

相对最近滚动祖先很容易理解,如下代码示例展示了最近滚动祖先sticky的效果:

这里要说明的一点是,如果代码中有空白符,文字默认会换行,如何不换行,就要设置空白符的表现形式,white-space:nowrap; 只要设置了left,top,bottom,right其中一个定位属性,该元素就会表现出粘性效果。

最近块级祖先

最近块级祖先的粘性效果类似于position:absolute;的效果,当有滚动条出现时,则会出现滚动粘性效果,也就是相对最近滚动祖先。

也就是说,在不考虑兼容性的情况下,只要能用position:absolute的地方都可以用粘性效果实现。

粘性效果sticky的兼容性

1659416706545.png

可以看到除了ie不兼容,其他浏览器都兼容,也就是说sticky的兼容性不是问题了。

层叠上下文

该值总是创建一个新的层叠上下文(stacking context)。注意,一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hiddenscrollauto, 或 overlay时),即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为(详情见Github issue on W3C CSSWG)。

sticky规则的应用有时候会导致背景穿透的情况,这就要从层叠上下文说起了。

所谓层叠上下文就是html中抽象出的一个z轴,sticky元素总会创建一个新的层,用来表现sticky的效果。

这个层的背景如果是透明的,那么其背景色就会覆盖其父元素,而显示底层元素的颜色。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改