您好,登錄后才能下訂單哦!
小編給大家分享一下CSS中如何使用position:sticky 實(shí)現(xiàn)粘性布局,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
簡(jiǎn)介
一般都知道下面幾個(gè)常用的:
{ position: static; position: relative; position: absolute; position: fixed; }
在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position還說(shuō)了下面這三個(gè)值:
/* 全局值 */ position: inherit; position: initial; position: unset;
估計(jì)大部分都沒(méi)有用過(guò)position:sticky
吧。這個(gè)屬性值還在試驗(yàn)階段。怎樣描述它呢?
初窺 position:sticky
sticky 英文字面意思是粘,粘貼,所以姑且稱之為粘性定位。下面就來(lái)了解下這個(gè)處于實(shí)驗(yàn)性的取值的具體功能及實(shí)用場(chǎng)景。
這是一個(gè)結(jié)合了 position:relative 和 position:fixed 兩種定位功能于一體的特殊定位,適用于一些特殊場(chǎng)景。
什么是結(jié)合兩種定位功能于一體呢?
元素先按照普通文檔流定位,然后相對(duì)于該元素在流中的 flow root(BFC)和 containing block(最近的塊級(jí)祖先元素)定位。
而后,元素定位表現(xiàn)為在跨越特定閾值前為相對(duì)定位,之后為固定定位。
這個(gè)特定閾值指的是 top, right, bottom 或 left 之一,換言之,指定 top, right, bottom 或 left 四個(gè)閾值其中之一,才可使粘性定位生效。否則其行為與相對(duì)定位相同。
sticky
:對(duì)象在常態(tài)時(shí)遵循常規(guī)流。它就像是relative
和fixed
的合體,當(dāng)在屏幕中時(shí)按常規(guī)流排版,當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見(jiàn)到的吸附效果。
常用場(chǎng)景:當(dāng)元素距離頁(yè)面視口(Viewport,也就是fixed定位的參照)頂部距離大于 0px 時(shí),元素以 relative
定位表現(xiàn),而當(dāng)元素距離頁(yè)面視口小于 0px 時(shí),元素表現(xiàn)為 fixed
定位,也就會(huì)固定在頂部。
代碼:
{ position: -webkit-sticky; position: sticky; top: 0; }
如下圖表現(xiàn)方式:
距離頁(yè)面頂部大于20px
,表現(xiàn)為 position:relative
;
距離頁(yè)面頂部小于20p
x,表現(xiàn)為 position:fixed
;
運(yùn)用 position:sticky
實(shí)現(xiàn)頭部導(dǎo)航欄固定
html代碼:
<div class="con"> <div class="samecon"> <h3>標(biāo)題一</h3> <p>這是一段文本</p> <p>這是一段文本</p> <p>這是一段文本</p> </div> <div class="samecon"> <h3>標(biāo)題二</h3> <p>這是一段文本</p> <p>這是一段文本</p> <p>這是一段文本</p> </div> <div class="samecon"> <h3>標(biāo)題三</h3> <p>這是一段文本</p> <p>這是一段文本</p> <p>這是一段文本</p> </div> <div class="samecon"> <h3>標(biāo)題四</h3> <p>這是一段文本</p> <p>這是一段文本</p> <p>這是一段文本</p> </div> <div class="samecon"> <h3>標(biāo)題五</h3> <p>這是一段文本</p> <p>這是一段文本</p> <p>這是一段文本</p> </div> <div class="samecon"> <h3>標(biāo)題五六</h3> <p>這是一段文本</p> <p>這是一段文本</p> <p>這是一段文本</p> </div> </div>
CSS代碼:
.samecon h3{ position: -webkit-sticky; position: sticky; top: 0; background:#ccc; padding:10px 0; }
同理,也可以實(shí)現(xiàn)側(cè)邊導(dǎo)航欄的超出固定。
生效規(guī)則
須指定 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
,則父容器無(wú)法進(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è)定了的閾值決定的。兼容性
這個(gè)屬性的兼容性還不是很好,目前仍是一個(gè)試驗(yàn)性的屬性,并不是W3C推薦的標(biāo)準(zhǔn)。
css的基本語(yǔ)法是:1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成;2、選擇器通常是需要改變樣式的HTML元素;3、每條聲明由一個(gè)屬性和一個(gè)值組成;4、屬性和屬性值被冒號(hào)分隔開(kāi)。
以上是“CSS中如何使用position:sticky 實(shí)現(xiàn)粘性布局”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。