粘性定位可以简单理解为
relative和fixed布局的混合。
基本概念
-
流盒
指的是粘性定位元素最近的
可滚动元素（overflow属性值不是visible的元素）的尺寸盒子，如果没有可滚动元素，则表示浏览器视窗盒子。 -
粘性约束矩形
即粘性布局元素的父级元素矩形
特性
- 当粘性约束矩形在可视范围内为
relative，反之，则为fixed - 粘性定位元素如果和它的父元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的
- 它的定位效果完全受限于父级元素们。如果父元素的
overflow属性设置了scroll，auto,overlay值，那么，粘性定位将会失效 - 同一容器中多个粘贴定位元素独立偏移，因此可能重叠；位置上下靠在一起的不同容器中的粘贴定位元素则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。
案例
- 案例一(了解流盒以及粘性约束矩形)
<body>
<div>
<nav>导航</nav>
</div>
</body>
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>
<div>
<nav>导航</nav>
<header>头部</header>
</div>
</body>
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/
