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