概述

position: sticky，這是一個比較容易忽略的css3 position 新屬性，它的作用即為實現粘性布局，它是 relative 與 fixed 的結合。

用法

默認情況下，其表現為relative，在視窗與設置了該屬性的元素之間，達到或超過其預設的 top、bottom、left、right，本屬性會轉變成 fixed，使 sticky 固定。

例如：

.menu{
    position:sticky;
    top: 0px;
}

例子中，設置 top 為 0，會表現為，頁面滾動至 menu 的頂端時，menu 變為 fixed 固定在頁面上方，效果如下：

生效條件

1. 父元素無論如何設置，必須表現為 visible 效果（註意 unset、auto、inherit、initial）

2. 必須設置 top、bottom、left、right 4個值之一，否則只會處於相對定位

3. 父元素的高度不能低於 sticky 元素的高度

4. sticky 元素僅在其父元素內生效

5. 註意 sticky 元素的位置，比如它如果在父元素最下方，那麽其 top、bottom 可能會失效

兼容性（2019.4.15）

粘性固定屬性 -- position:sticky