position 中的 sticky 值是 CSS3 新增的,設置了 sticky 值后,在屏幕范圍(viewport)時該元素的位置并不受到定位影響(設置是top、left等屬性無效),當該元素的位置將要移出偏移范圍時,定位又會變成fixed,根據設置的left、top等屬性成固定位置的效果。
sticky 屬性值有以下幾個特點:
該元素并不脫離文檔流,仍然保留元素原本在文檔流中的位置。當元素在容器中被滾動超過指定的偏移值時,元素在容器內固定在指定位置。亦即如果你設置了top: 50px,那么在sticky元素到達距離相對定位的元素頂部50px的位置時固定,不再向上移動。元素固定的相對偏移是相對于離它最近的具有滾動框的祖先元素,如果祖先元素都不可以滾動,那么是相對于viewport來計算元素的偏移量。