資訊專欄INFORMATION COLUMN
摘要：生效規(guī)則須指定或四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。并且和同時設(shè)置時，生效的優(yōu)先級高，和同時設(shè)置時，的優(yōu)先級高。設(shè)定為元素的任意父節(jié)點的屬性必須是，否則不會生效。
簡介
前面寫了一篇文章講解了position常用的幾個屬性：《CSS基礎(chǔ)篇-- position屬性講解》
一般都知道下面幾個常用的：
{
position: static;
position: relative;
position: absolute;
position: fixed;
}
在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position還說了下面這三個值：
/* 全局值 */ position: inherit; position: initial; position: unset;
估計大部分都沒有用過position:sticky吧。這個屬性值還在試驗階段。怎樣描述它呢？
sticky：對象在常態(tài)時遵循常規(guī)流。它就像是relative和fixed的合體，當(dāng)在屏幕中時按常規(guī)流排版，當(dāng)卷動到屏幕外時則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實中你見到的吸附效果。
常用場景：當(dāng)元素距離頁面視口（Viewport，也就是fixed定位的參照）頂部距離大于 0px 時，元素以 relative 定位表現(xiàn)，而當(dāng)元素距離頁面視口小于 0px 時，元素表現(xiàn)為 fixed 定位，也就會固定在頂部。
代碼：
{
position: -webkit-sticky;
position: sticky;
top: 0;
}
如下圖表現(xiàn)方式：
距離頁面頂部大于20px，表現(xiàn)為 position:relative;
距離頁面頂部小于20px，表現(xiàn)為 position:fixed;
html代碼：
標(biāo)題一
這是一段文本
這是一段文本
這是一段文本
標(biāo)題二
這是一段文本
這是一段文本
這是一段文本
標(biāo)題三
這是一段文本
這是一段文本
這是一段文本
標(biāo)題四
這是一段文本
這是一段文本
這是一段文本
標(biāo)題五
這是一段文本
這是一段文本
這是一段文本
標(biāo)題五六
這是一段文本
這是一段文本
這是一段文本
CSS代碼：
.samecon h2{
position: -webkit-sticky;
position: sticky;
top: 0;
background:#ccc;
padding:10px 0;
}
同理，也可以實現(xiàn)側(cè)邊導(dǎo)航欄的超出固定。
生效規(guī)則
須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
并且 top 和 bottom 同時設(shè)置時，top 生效的優(yōu)先級高，left 和 right 同時設(shè)置時，left 的優(yōu)先級高。
設(shè)定為 position:sticky 元素的任意父節(jié)點的 overflow 屬性必須是 visible，否則 position:sticky 不會生效。這里需要解釋一下：
如果 position:sticky 元素的任意父節(jié)點定位設(shè)置為 overflow:hidden，則父容器無法進(jìn)行滾動，所以 position:sticky 元素也不會有滾動然后固定的情況。
如果 position:sticky 元素的任意父節(jié)點定位設(shè)置為 position:relative | absolute | fixed，則元素相對父元素進(jìn)行定位，而不會相對 viewprot 定位。
達(dá)到設(shè)定的閥值。這個還算好理解，也就是設(shè)定了 position:sticky 的元素表現(xiàn)為 relative 還是 fixed 是根據(jù)元素是否達(dá)到設(shè)定了的閾值決定的。
兼容性這個屬性的兼容性還不是很好，目前仍是一個試驗性的屬性，并不是W3C推薦的標(biāo)準(zhǔn)。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/115599.html
摘要：為屬性的默認(rèn)值，元素會遵循正常的文檔流，且會忽略等屬性。粘性定位常用于定位字母列表的頭部元素。須指定或四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。 postion 屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值： 1. position: static2. position: inherit3. position: relative4. ...
摘要：元素在跨越特定閾值前為相對定位，之后為固定定位。和簡單介紹和，哪個會觸發(fā)哪個觸發(fā)順序，哪個能夠避免，哪個時盡量減少而不可能避免，哪些操作會觸發(fā)阮一峰動畫動畫與動畫區(qū)別性能區(qū)別性能優(yōu)化動畫性能優(yōu)化動畫介紹后續(xù)還會繼續(xù)進(jìn)行面試題的積累 記錄一下最近碰上的面試題 js篇 介紹一下Array的API/方法，具體到返回值和參數(shù) join / slice / splice / sort / pu...
摘要：元素在跨越特定閾值前為相對定位，之后為固定定位。和簡單介紹和，哪個會觸發(fā)哪個觸發(fā)順序，哪個能夠避免，哪個時盡量減少而不可能避免，哪些操作會觸發(fā)阮一峰動畫動畫與動畫區(qū)別性能區(qū)別性能優(yōu)化動畫性能優(yōu)化動畫介紹后續(xù)還會繼續(xù)進(jìn)行面試題的積累 記錄一下最近碰上的面試題 js篇 介紹一下Array的API/方法，具體到返回值和參數(shù) join / slice / splice / sort / pu...
摘要：默認(rèn)值當(dāng)元素的屬性沒有設(shè)置或者值為時，元素處于文檔流中，且等偏移屬性是不起作用的。相對定位設(shè)置相對定位的元素仍然處于文檔流中，其占據(jù)的空間仍然保留。包含塊的判定絕對定位絕對定位元素會脫離文檔流，此時其原有空間為，也就是不存在透明磚塊占位。 前言 今天呢，想聊聊css里的position屬性。也就是元素定位屬性。目的呢，是為了梳理一下自己學(xué)習(xí)工作中積累的經(jīng)驗。 標(biāo)準(zhǔn) 根據(jù)MDN文檔，CS...
摘要：默認(rèn)值當(dāng)元素的屬性沒有設(shè)置或者值為時，元素處于文檔流中，且等偏移屬性是不起作用的。相對定位設(shè)置相對定位的元素仍然處于文檔流中，其占據(jù)的空間仍然保留。包含塊的判定絕對定位絕對定位元素會脫離文檔流，此時其原有空間為，也就是不存在透明磚塊占位。 前言 今天呢，想聊聊css里的position屬性。也就是元素定位屬性。目的呢，是為了梳理一下自己學(xué)習(xí)工作中積累的經(jīng)驗。 標(biāo)準(zhǔn) 根據(jù)MDN文檔，CS...
閱讀 2121·2021-09-13 10:23
閱讀 2448·2021-09-02 09:47
閱讀 3966·2021-08-16 11:01
閱讀 1323·2021-07-25 21:37
閱讀 1720·2019-08-30 15:56
閱讀 638·2019-08-30 13:52
閱讀 3227·2019-08-26 10:17
閱讀 2531·2019-08-23 18:17
