粘性定位可以簡單理解為
relative和fixed布局的混合。
基本概念
-
流盒
指的是粘性定位元素最近的
可滾動(dòng)元素（overflow屬性值不是visible的元素）的尺寸盒子，如果沒有可滾動(dòng)元素，則表示瀏覽器視窗盒子。 -
粘性約束矩形
即粘性布局元素的父級(jí)元素矩形
特性
- 當(dāng)粘性約束矩形在可視范圍內(nèi)為
relative，反之，則為fixed - 粘性定位元素如果和它的父元素一樣高，則垂直滾動(dòng)的時(shí)候，粘性定位效果是不會(huì)出現(xiàn)的
- 它的定位效果完全受限于父級(jí)元素們。如果父元素的
overflow屬性設(shè)置了scroll，auto,overlay值，那么，粘性定位將會(huì)失效 - 同一容器中多個(gè)粘貼定位元素獨(dú)立偏移，因此可能重疊；位置上下靠在一起的不同容器中的粘貼定位元素則會(huì)鳩占鵲巢，擠開原來的元素，形成依次占位的效果。
案例
- 案例一(了解流盒以及粘性約束矩形)
<body>
<div>
<nav>導(dǎo)航</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
所以，如果粘性定位元素的高度如果和粘性定位的父元素高度相等的話，粘性定位元素在粘性約束矩形中將會(huì)沒有實(shí)現(xiàn)粘性效果的活動(dòng)空間，隨著粘性約束矩形消失在可視范圍內(nèi)時(shí)，粘性定位元素也將會(huì)一同消失在可視范圍內(nèi)，也就是所謂的失效效果。
- 案例二(多元素粘性效果)
<body>
<div>
<nav>導(dǎo)航</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
可以看到當(dāng)一個(gè)父元素內(nèi)有兩個(gè)粘性元素時(shí)，后面的粘性元素隨著滾動(dòng)會(huì)覆蓋前面的粘性元素。
但是，如果給黃色導(dǎo)航設(shè)置z-index:20,綠色頭部設(shè)置z-index:19，那么，黃色將會(huì)覆蓋綠色，而不是本來的后來居上的效果。畢竟，當(dāng)出現(xiàn)粘性效果的時(shí)候，此時(shí)元素的效果相當(dāng)position:fixed，z-index會(huì)生效。
本文參考：
https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/
https://www.zhangxinxu.com/wordpress/2020/03/position-sticky-rules/
