CSS 中 position 屬性的取值
{
position: static;
position: relative;
position: absolute;
position: fixed;
position: inherit;
position: initial;
position: unset;
}

sticky 英文字面意思是粘，粘貼，所以姑且稱之為粘性定位。下面就來了解下這個(gè)處于實(shí)驗(yàn)性的取值的具體功能及實(shí)用場景。

這是一個(gè)結(jié)合了 position:relative 和 position:fixed 兩種定位功能于一體的特殊定位，適用于一些特殊場景。

IOS 家族（SAFARI && IOS SAFARI）和 Firefox 很早開始就支持 position:sticky 了。而 Chrome53~55 則需要啟用實(shí)驗(yàn)性網(wǎng)絡(luò)平臺(tái)功能才行。其中 webkit 內(nèi)核的要添加上私有前綴 -webkit-。

簡單描述下生效過程，因?yàn)樵O(shè)定的閾值是 top:0 ，這個(gè)值表示當(dāng)元素距離頁面視口（Viewport，也就是fixed定位的參照）頂部距離大于 0px 時(shí)，元素以 relative 定位表現(xiàn)，而當(dāng)元素距離頁面視口小于 0px 時(shí)，元素表現(xiàn)為 fixed 定位，也就會(huì)固定在頂部。

生效規(guī)則

position:sticky 的生效是有一定的限制的，總結(jié)如下：

須指定 top, right, bottom 或 left 四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對(duì)定位相同。

并且 top 和 bottom 同時(shí)設(shè)置時(shí)，top 生效的優(yōu)先級(jí)高，left 和 right 同時(shí)設(shè)置時(shí)，left 的優(yōu)先級(jí)高。

設(shè)定為 position:sticky 元素的任意父節(jié)點(diǎn)的 overflow 屬性必須是 visible，否則 position:sticky 不會(huì)生效。

如果 position:sticky 元素的任意父節(jié)點(diǎn)定位設(shè)置為 overflow:hidden，則父容器無法進(jìn)行滾動(dòng)，所以 position:sticky 元素也不會(huì)有滾動(dòng)然后固定的情況。

如果 position:sticky 元素的任意父節(jié)點(diǎn)定位設(shè)置為 position:relative | absolute | fixed，則元素相對(duì)父元素進(jìn)行定位，而不會(huì)相對(duì) viewprot 定位。

達(dá)到設(shè)定的閥值。這個(gè)還算好理解，也就是設(shè)定了 position:sticky 的元素表現(xiàn)為 relative 還是 fixed 是根據(jù)元素是否達(dá)到設(shè)定了的閾值決定的。

當(dāng)前文章：使用 position:sticky 實(shí)現(xiàn)粘性布局
標(biāo)題URL：http://chinadenli.net/news41/168691.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、電子商務(wù)、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈、營銷型網(wǎng)站建設(shè)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)