深刻理解position sticky 粘性定位

時間 2020-05-30

標籤深刻理解 position sticky 粘性定位欄目 CSS 简体版

原文原文鏈接

粘性定位能夠簡單理解爲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;
}
複製代碼