使用position:sticky 实现粘性布局 | sticky css
如果问,CSS中position属性的取值有几个?大部分人的回答是,大概是下面这几个吧?{position:static;position:relative;position:absolute;position:fixed;}额,其实,我们还可以有这3个取值:{/*全局值*/position:inherit;position:initial;position:unset;}没了吗?偶然发现其实还有一个处于实验性的取值,position:sticky(戳我查看MDN解释[1]):卧槽,什么来的?前端发展太快,新东西目接不暇,但是对于有趣的东西,还是忍不住一探究竟。(只怪当初...) 初窥 position:stickysticky英文字面意思是粘,粘贴,所以姑且称之为粘性...
如果问,CSS 中 position 属性的取值有几个?大部分人的回答是,大概是下面这几个吧?
{ position: static; position: relative; position: absolute; position: fixed; }额,其实,我们还可以有这 3 个取值:
{ /* 全局值 */ position: inherit; position: initial; position: unset; }没了吗?偶然发现其实还有一个处于实验性的取值,position:sticky(戳我查看MDN解释[1]):
卧槽,什么来的?
前端发展太快,新东西目接不暇,但是对于有趣的东西,还是忍不住一探究竟。(只怪当初...)
初窥 position:stickysticky 英文字面意思是粘,粘贴,所以姑且称之为粘性定位。下面就来了解下这个处于实验性的取值的具体功能及实用场景。
这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。
什么是结合两种定位功能于一体呢?
元素先按照普通文档流定位,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。
而后,元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
不乐观的兼容性在讲述具体示例之前,还是很有必要了解一下 position:sticky 的兼容性,嗯,不乐观的兼容性。
看看 CANIUSE[2] 下的截图:
SHIT,这么好的属性支持性居然这么惨淡。
IOS 家族(SAFARI && IOS S...