資訊專欄INFORMATION COLUMN
摘要：前言你知道定位有哪些值嗎常規(guī)，絕對定位，相對定位。是的，正如標題提到的，它就是粘性定位。它后續(xù)的定位不會對后面的元素產(chǎn)生影響。該定位依賴于自身的閥值，所以必須設置其中之一的值才會有效，否則表現(xiàn)為相對定位。
前言
你知道position定位有哪些值嗎？常規(guī)static，絕對定位fixed、absolute，相對定位relative。好吧，這些是個前端都知道。今天要記錄的是個不常見的、還在實驗階段的、兼容性不怎么完美的一個值。是的，正如標題提到的，它就是粘性定位sticky。你之前是否聽說過呢？當我知道這個定位值后，我震驚了，臥槽，我是個假的前端吧，學前端一年多竟然不知道定位還有個粘性定位。然后我就試了一下這個定位的效果，哇哦，真的很好用，遺憾的是兼容性不夠完美，但是現(xiàn)代主流瀏覽器的較新版本都已經(jīng)兼容了。
position:sticky
描述
根據(jù)MDN上的解釋，它首先會按照常規(guī)定位方式布局于文檔流中，然后再根據(jù)文檔BFC和最近的containing block（最近的塊級祖先元素）定位。它后續(xù)的定位不會對后面的元素產(chǎn)生影響。該定位依賴于自身的top、left、bottom、right閥值，所以必須設置其中之一的值sticky才會有效，否則表現(xiàn)為相對定位。
我的理解
元素在視口沒有滾動到設定的閥值時，它會表現(xiàn)為static定位（MDN上好像解釋說是表現(xiàn)為relative，寫的demo上發(fā)現(xiàn)top等值并沒有表現(xiàn)出相對自身的移動，如理解錯誤，請千萬指出，感謝），當元素被滾動到閥值時，它不會越過閥值，而是表現(xiàn)為fixed定位。
舉個
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/116080.html
摘要：默認值當元素的屬性沒有設置或者值為時，元素處于文檔流中，且等偏移屬性是不起作用的。相對定位設置相對定位的元素仍然處于文檔流中，其占據(jù)的空間仍然保留。包含塊的判定絕對定位絕對定位元素會脫離文檔流，此時其原有空間為，也就是不存在透明磚塊占位。 前言 今天呢，想聊聊css里的position屬性。也就是元素定位屬性。目的呢，是為了梳理一下自己學習工作中積累的經(jīng)驗。 標準 根據(jù)MDN文檔，CS...
摘要：默認值當元素的屬性沒有設置或者值為時，元素處于文檔流中，且等偏移屬性是不起作用的。相對定位設置相對定位的元素仍然處于文檔流中，其占據(jù)的空間仍然保留。包含塊的判定絕對定位絕對定位元素會脫離文檔流，此時其原有空間為，也就是不存在透明磚塊占位。 前言 今天呢，想聊聊css里的position屬性。也就是元素定位屬性。目的呢，是為了梳理一下自己學習工作中積累的經(jīng)驗。 標準 根據(jù)MDN文檔，CS...
摘要：這個界限就是該元素頂部距離窗口頂部的距離等于該元素設置的值比如以下像素分割線當我的頂部距離窗口頂部為值時，我就會像一樣在距離窗口值處的時代發(fā)送分效果圖當頁面滾動到距離黃色區(qū)塊頂部時，黃色區(qū)塊就會在窗口頂部處，頁面再往下滾動距離也不會變。 position: sticky; fixed 吸頂 頁面滾動結(jié)束后頁面才渲染 需求 經(jīng)常會有這樣的需求，當頁面滾動到某一個位置fixedTopV...
摘要：這個界限就是該元素頂部距離窗口頂部的距離等于該元素設置的值比如以下像素分割線當我的頂部距離窗口頂部為值時，我就會像一樣在距離窗口值處的時代發(fā)送分效果圖當頁面滾動到距離黃色區(qū)塊頂部時，黃色區(qū)塊就會在窗口頂部處，頁面再往下滾動距離也不會變。 position: sticky; fixed 吸頂 頁面滾動結(jié)束后頁面才渲染 需求 經(jīng)常會有這樣的需求，當頁面滾動到某一個位置fixedTopV...
閱讀 2858·2021-11-02 14:42
閱讀 3227·2021-10-08 10:04
閱讀 1254·2019-08-30 15:55
閱讀 1089·2019-08-30 15:54
閱讀 2384·2019-08-30 15:43
閱讀 1742·2019-08-29 15:18
閱讀 929·2019-08-29 11:11
閱讀 2433·2019-08-26 13:52
