深刻理解position sticky 粘性定位
粘性定位能夠簡單理解爲
relative和fixed佈局的混合。
基本概念
-
流盒css
指的是粘性定位元素最近的
可滾動元素（overflow屬性值不是visible的元素）的尺寸盒子，若是沒有可滾動元素，則表示瀏覽器視窗盒子。html -
粘性約束矩形瀏覽器
即粘性佈局元素的父級元素矩形wordpress
特性
- 當粘性約束矩形在可視範圍內爲
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;
}
複製代碼
因此，若是粘性定位元素的高度若是和粘性定位的父元素高度相等的話，粘性定位元素在粘性約束矩形中將會沒有實現粘性效果的活動空間，隨着粘性約束矩形消失在可視範圍內時，粘性定位元素也將會一同消失在可視範圍內，也就是所謂的失效效果。佈局
- 案例二(多元素粘性效果)
<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;
}
複製代碼
能夠看到當一個父元素內有兩個粘性元素時，後面的粘性元素隨着滾動會覆蓋前面的粘性元素。spa
可是，若是給黃色導航設置z-index:20,綠色頭部設置z-index:19，那麼，黃色將會覆蓋綠色，而不是原本的後來居上的效果。畢竟，當出現粘性效果的時候，此時元素的效果至關position:fixed，z-index會生效。code
本文參考：
www.zhangxinxu.com/wordpress/2… www.zhangxinxu.com/wordpress/2…cdn