成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

使用 position:sticky 實現(xiàn)粘性布局

2022-06-18    分類: 網(wǎng)站建設

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

sticky 英文字面意思是粘,粘貼,所以姑且稱之為粘性定位。下面就來了解下這個處于實驗性的取值的具體功能及實用場景。

這是一個結合了 position:relative 和 position:fixed 兩種定位功能于一體的特殊定位,適用于一些特殊場景。

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

簡單描述下生效過程,因為設定的閾值是 top:0 ,這個值表示當元素距離頁面視口(Viewport,也就是fixed定位的參照)頂部距離大于 0px 時,元素以 relative 定位表現(xiàn),而當元素距離頁面視口小于 0px 時,元素表現(xiàn)為 fixed 定位,也就會固定在頂部。

生效規(guī)則

position:sticky 的生效是有一定的限制的,總結如下:

須指定 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 的元素表現(xiàn)為 relative 還是 fixed 是根據(jù)元素是否達到設定了的閾值決定的。

當前文章:使用 position:sticky 實現(xiàn)粘性布局
標題URL:http://jinyejixie.com/news41/168691.html

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

廣告

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

成都網(wǎng)站建設
瑞丽市| 茂名市| 庆云县| 奇台县| 漾濞| 通化县| 武城县| 孟连| 桦川县| 札达县| 扶绥县| 汕尾市| 丹巴县| 乐山市| 宁波市| 英吉沙县| 民县| 乐东| 昂仁县| 大田县| 南康市| 新营市| 西昌市| 太原市| 印江| 温州市| 安仁县| 陇西县| 深州市| 海门市| 龙州县| 万宁市| 曲靖市| 水富县| 册亨县| 昭平县| 叙永县| 灵山县| 芦溪县| 七台河市| 乌拉特后旗|