概述
position: sticky,这是一个比较容易忽略的css3 position 新属性,它的作用即为实现粘性布局,它是 relative 与 fixed 的结合。
用法
默认情况下,其表现为relative,在视窗与设置了该属性的元素之间,达到或超过其预设的 top、bottom、left、right,本属性会转变成 fixed,使 sticky 固定。
例如:
.menu{
position:sticky;
top: 0px;
}
例子中,设置 top 为 0,会表现为,页面滚动至 menu 的顶端时,menu 变为 fixed 固定在页面上方,效果如下:
生效条件
1. 父元素无论如何设置,必须表现为 visible 效果(注意 unset、auto、inherit、initial)
2. 必须设置 top、bottom、left、right 4个值之一,否则只会处于相对定位
3. 父元素的高度不能低于 sticky 元素的高度
4. sticky 元素仅在其父元素内生效
5. 注意 sticky 元素的位置,比如它如果在父元素最下方,那么其 top、bottom 可能会失效
兼容性(2019.4.15)