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