聊聊sticky定位

zhoutk 發(fā)布于2019-08-30 15:43 / 2310人閱讀

摘要：前言你知道定位有哪些值嗎常規(guī)，絕對(duì)定位，相對(duì)定位。是的，正如標(biāo)題提到的，它就是粘性定位。它后續(xù)的定位不會(huì)對(duì)后面的元素產(chǎn)生影響。該定位依賴于自身的閥值，所以必須設(shè)置其中之一的值才會(huì)有效，否則表現(xiàn)為相對(duì)定位。

前言

你知道position定位有哪些值嗎？常規(guī)static，絕對(duì)定位fixed、absolute，相對(duì)定位relative。好吧，這些是個(gè)前端都知道。今天要記錄的是個(gè)不常見(jiàn)的、還在實(shí)驗(yàn)階段的、兼容性不怎么完美的一個(gè)值。是的，正如標(biāo)題提到的，它就是粘性定位sticky。你之前是否聽(tīng)說(shuō)過(guò)呢？當(dāng)我知道這個(gè)定位值后，我震驚了，臥槽，我是個(gè)假的前端吧，學(xué)前端一年多竟然不知道定位還有個(gè)粘性定位。然后我就試了一下這個(gè)定位的效果，哇哦，真的很好用，遺憾的是兼容性不夠完美，但是現(xiàn)代主流瀏覽器的較新版本都已經(jīng)兼容了。

position:sticky

描述
根據(jù)MDN上的解釋，它首先會(huì)按照常規(guī)定位方式布局于文檔流中，然后再根據(jù)文檔BFC和最近的containing block（最近的塊級(jí)祖先元素）定位。它后續(xù)的定位不會(huì)對(duì)后面的元素產(chǎn)生影響。該定位依賴于自身的top、left、bottom、right閥值，所以必須設(shè)置其中之一的值sticky才會(huì)有效，否則表現(xiàn)為相對(duì)定位。

我的理解
元素在視口沒(méi)有滾動(dòng)到設(shè)定的閥值時(shí)，它會(huì)表現(xiàn)為static定位（MDN上好像解釋說(shuō)是表現(xiàn)為relative，寫(xiě)的demo上發(fā)現(xiàn)top等值并沒(méi)有表現(xiàn)出相對(duì)自身的移動(dòng)，如理解錯(cuò)誤，請(qǐng)千萬(wàn)指出，感謝），當(dāng)元素被滾動(dòng)到閥值時(shí)，它不會(huì)越過(guò)閥值，而是表現(xiàn)為fixed定位。
舉個(gè)