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