深入理解position sticky 粘性定位

粘性定位可以简单理解为relative和fixed布局的混合。

基本概念

• 流盒

  指的是粘性定位元素最近的可滚动元素（overflow属性值不是visible的元素）的尺寸盒子，如果没有可滚动元素，则表示浏览器视窗盒子。

• 粘性约束矩形

  即粘性布局元素的父级元素矩形

特性

• 当粘性约束矩形在可视范围内为relative，反之，则为fixed
• 粘性定位元素如果和它的父元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的
• 它的定位效果完全受限于父级元素们。如果父元素的overflow属性设置了scroll，auto,overlay值，那么，粘性定位将会失效
• 同一容器中多个粘贴定位元素独立偏移，因此可能重叠；位置上下靠在一起的不同容器中的粘贴定位元素则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。

案例

• 案例一(了解流盒以及粘性约束矩形)

    

        
导航
    

body{
    height: 2000px;
    width: 100%;
    background-color: red;
}
div {
    height: 200px;
    margin-top: 50px;
    border: solid deepskyblue;
    width: 400px;
    background-color: deepskyblue;
}
nav {
    position: sticky;
    top: 20px;
    background: yellow;
    height: 60px;
    line-height: 60px;
}

image

所以，如果粘性定位元素的高度如果和粘性定位的父元素高度相等的话，粘性定位元素在粘性约束矩形中将会没有实现粘性效果的活动空间，随着粘性约束矩形消失在可视范围内时，粘性定位元素也将会一同消失在可视范围内，也就是所谓的失效效果。

• 案例二(多元素粘性效果)

    

        
导航
        
头部
    

body{
    height: 2000px;
    width: 100%;
    background-color: red;
}
div {
    height: 200px;
    margin-top: 50px;
    border: solid deepskyblue;
    width: 400px;
    background-color: deepskyblue;
}
nav {
    position: sticky;
    top: 20px;
    background: yellow;
    height: 60px;
    line-height: 60px;
}
header {
    position: sticky;
    top: 20px;
    background: green;
    height: 60px;
    line-height: 60px;
    display: block;
}

image

可以看到当一个父元素内有两个粘性元素时，后面的粘性元素随着滚动会覆盖前面的粘性元素。

但是，如果给黄色导航设置z-index:20,绿色头部设置z-index:19，那么，黄色将会覆盖绿色，而不是本来的后来居上的效果。毕竟，当出现粘性效果的时候，此时元素的效果相当position:fixed，z-index会生效。

本文参考：

https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/
https://www.zhangxinxu.com/wordpress/2020/03/position-sticky-rules/