今天小編給大家分享一下粘性定位是不是css3新增的的相關知識點,內(nèi)容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
創(chuàng)新互聯(lián)于2013年創(chuàng)立,先為思禮等服務建站,思禮等地企業(yè),進行企業(yè)商務咨詢服務。為思禮企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
粘性定位是css3新增的,粘性定位指的是position定位屬性值設置為sticky,表示基于用戶的滾動位置來定位,元素定位表現(xiàn)為在跨越特定閾值前為相對定位,之后是固定定位,語法為“元素{position: sticky;}”。
本教程操作環(huán)境:windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。
css3中新的定位屬性,本身也具有定位元素的屬性
理解為相對定位position:relative + 固定定位position:fixed的混合體
position:sticky粘性定位,基于用戶的滾動定位
sticky 英文字面意思是粘,粘貼,所以可以把它稱之為粘性定位。
position: sticky; 基于用戶的滾動位置來定位。
粘性定位的元素是依賴于用戶的滾動,在 position:relative 與 position:fixed 定位之間切換。
它的行為就像 position:relative; 而當頁面滾動超出目標區(qū)域時,它的表現(xiàn)就像 position:fixed;,它會固定在目標位置。
元素定位表現(xiàn)為在跨越特定閾值前為相對定位,之后為固定定位。
這個特定閾值指的是 top, right, bottom 或 left 之一,換言之,指定 top, right, bottom 或 left 四個閾值其中之一,才可使粘性定位生效。否則其行為與相對定位相同。
依賴用戶的滾動定位,行為像position:relative,當頁面滾動超出目標區(qū)域,行為表現(xiàn)為position:fixed
什么是目標區(qū)域
相對父元素,超出閾值,這個閾值通過top、left、right、bottom確定
滾動元素
overflow不是visible的元素
流動盒子
粘性定位元素最近的可滾動元素的尺寸盒子。如果沒有滾動盒子,則是瀏覽器視窗盒子
粘性約束矩形
粘性布局元素的父級元素矩形
①父元素不能是overflow:hidden/overflow:auto/overflow:scroll/overflow:overlay
②父元素高度不能低于sticky高度,否則無法顯示效果
③必須指定top/left/right/bottom任一個方向的屬性值
④作用域在父元素內(nèi),效果在父元素內(nèi)生效
⑤在可視范圍內(nèi)為relative,反之是fixed
⑥同一個容器內(nèi)多個粘性元素彼此獨立偏移,可能會發(fā)生重疊
p sticky{ position:-webkit-sticky;/*safair*/ position:sticky; top:0; }
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body { height: 2000px; width: 100%; background-color: rgb(214, 160, 169); } p { height: 200px; width: 400px; margin-top: 50px; background-color: rgb(189, 137, 238); border: 1px solid rgb(126, 235, 189); } nav { position: sticky; background-color: rgb(146, 189, 238); top: 20px; /*設置距離頂部20px的時候?qū)Ш綑陂_始固定*/ height: 60px; line-height: 60px; } </style></head><body> <p> <nav>導航欄</nav> </p></body></html>
效果展示
粉色背景的盒子是上述的流盒,藍色為粘性約束的矩形框(父元素p),紫色的為粘性元素(p父里面的nav子)
向上滾動鼠標,當距離top:20px的時候?qū)Ш綑诠潭ǎ怀^紫色的父親p
向上滾動鼠標,父親p紫色盒子粘性約束矩形超出流盒子,導航欄藍色盒子也向上滾動了,但是始終在紫色盒子父p里面
向上滾動鼠標,紫色的盒子超出粉色流盒子,消失在可視范圍內(nèi)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body { height: 2000px; width: 100%; background-color: rgb(214, 160, 169); } p { height: 200px; width: 400px; margin-top: 50px; background-color: rgb(189, 137, 238); border: 1px solid rgb(126, 235, 189); } nav { position: sticky; background-color: rgb(146, 189, 238); top: 20px; /*設置距離頂部20px的時候?qū)Ш綑陂_始固定*/ height: 60px; line-height: 60px; } header { position: sticky; background-color: rgb(250, 181, 150); top: 20px; /*設置距離頂部20px的時候?qū)Ш綑陂_始固定*/ height: 60px; line-height: 60px; display: block; } </style></head><body> <p> <nav>導航欄</nav> <header>頭部</header> </p></body></html>
效果展示
粉色背景的盒子是上述的流盒,藍色為粘性約束的矩形框(父元素p),紫色的為粘性元素(p父里面的nav子),橙色的也為粘性元素(p里面的header子)
向上滾動鼠標,藍色的導航欄固定,橙色的向上滾動,藍色和橙色兩個粘性元素的粘性約束矩形都在紫色p父里面
向上滾動鼠標,藍色的導航欄消失,橙色的盒子固定,覆蓋導航欄(證明后面的粘性元素會覆蓋前面的粘性元素)
向上滾動鼠標,橙色的盒子超出粉色流盒子,消失在可視范圍內(nèi)
總結:當有多個粘性元素的時候,后面的粘性元素會覆蓋前面的粘性元素
前文總結了z-index的層級覆蓋,來試試加上z-index會發(fā)生怎么樣的覆蓋效果
nav.z-index: 20 header.z-index:19
復習:css中的z-index層級問題
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body { height: 2000px; width: 100%; background-color: rgb(214, 160, 169); } p { height: 200px; width: 400px; margin-top: 50px; background-color: rgb(189, 137, 238); border: 1px solid rgb(126, 235, 189); } nav { position: sticky; background-color: rgb(146, 189, 238); top: 20px; /*設置距離頂部20px的時候?qū)Ш綑陂_始固定*/ height: 60px; line-height: 60px; z-index: 20; } header { position: sticky; background-color: rgb(250, 181, 150); top: 20px; height: 60px; line-height: 60px; display: block; z-index: 19; } </style></head><body> <p> <nav>導航欄</nav> <header>頭部</header> </p></body></html>
效果展示
藍色的導航欄逐漸覆蓋黃色的頭部
總結:粘性元素生效相當于position:fixed,z-index會生效
以上就是“粘性定位是不是css3新增的”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當前文章:粘性定位是不是css3新增的
分享網(wǎng)址:http://muchs.cn/article40/pgdceo.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設、小程序開發(fā)、微信公眾號、網(wǎng)站營銷、移動網(wǎng)站建設、虛擬主機
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)