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