z-index 與 css 定位屬性
z-index 只對(duì)定位元素有作用。
{position:relative;z-index:2;}
{position:absolute;z-index:2;}
{position:fixed;z-index:2;}
{position:sticky;z-index:2;}
如果定位元素z-index沒(méi)有發(fā)生嵌套：
- 后來(lái)居上迟杂；
- 哪個(gè)值大哪個(gè)在上；
如果定位元素z-index發(fā)生嵌套：
- 以祖先元素為標(biāo)準(zhǔn)(
z-index不為auto)
css 中的層疊上下文和層疊等級(jí)
層疊上下文是HTML元素中的一個(gè)三維概念截亦，表示元素在z軸上距離人眼更近宴胧。
具有層疊上下文的元素：
- 頁(yè)面根元素天生具有層疊上下文，稱(chēng)為“根層疊上下文”。
- z-index 值為數(shù)值的定位元素具有層疊上下文精钮。
- 其它屬性
層疊上下文中的每個(gè)元素都有一個(gè)層疊等級(jí)威鹿，決定了同一個(gè)層疊上下文中元素在z軸上的顯示順序。遵循“后來(lái)居上”和“誰(shuí)值大誰(shuí)在上”的層疊準(zhǔn)則轨香。
層疊等級(jí)(stacking level) 和 z-index 不是一個(gè)東西忽你。普通元素也有層疊等級(jí)。
層疊等級(jí)是放在同一個(gè)層疊上下文中來(lái)進(jìn)行比較的臂容，不在同一個(gè)層疊上下文中沒(méi)有意義科雳。
層疊上下文的特性
- 層疊上下文可以嵌套，組合成一個(gè)分層次的層疊上下文脓杉。
- 每個(gè)層疊上下文和兄弟元素獨(dú)立：當(dāng)進(jìn)行層疊變化或渲染時(shí)糟秘，只影響后代元素。
- 每個(gè)層疊上下文是自成體系的：當(dāng)元素的內(nèi)容被層疊后球散，整個(gè)元素被認(rèn)為是在父層的層疊順序中尿赚。
層疊順序
層疊順序表示元素發(fā)生層疊時(shí)特定的垂直顯示順序。
7階層疊等級(jí)(stacking level)
層疊等級(jí)的比較要在同一個(gè)層疊上下文中
看下面的例子：
.inline-block{
display:inline-block;
background:olive;
margin:-30px;
}
.block{
display:block;
background:green;
}
z-index 與層疊上下文
- 定位元素默認(rèn)
z-index:auto可以看成是z-index:0蕉堰；
為何定位元素會(huì)覆蓋普通元素凌净？
定位元素默認(rèn)
z-index:auto，根據(jù)層疊順序表z-index:auto是大于inline/inline-block的屋讶，所以定位后冰寻，就會(huì)覆蓋普通元素。
- z-index 不為 auto 的定位元素會(huì)創(chuàng)建層疊上下文丑婿；
從層疊順序上講性雄，
z-index:auto可以看成是z-index:0；
但從層疊上下文來(lái)講羹奉，z-index:auto不會(huì)產(chǎn)生層疊上下文秒旋，z-index:0則會(huì)產(chǎn)生層疊上下文。
- z-index 層疊順序的比較止步于父級(jí)層疊上下文诀拭；
其它具有層疊上下文的css屬性
-
z-index值不為auto的子 flex 項(xiàng)(父元素display:flex|inline-flex)迁筛。
<div class="box">
<div class="d1">
<div class="d2"></div>
</div>
</div>
.box{
margin:100px;background:blue;
display:flex;
}
.d1{z-index:1;} /*這里的值不是auto，所以父元素添加flex后才有了層疊上下文*/
.d2{
width:100px;height:100px;background:green;
position:relative;top:-20px;left:-20px;
z-index:-1;
}
- 元素的
opacity值不是1耕挨。
<div class="box">
<div class="d1"></div>
</div>
.box{
margin:100px;background:blue;
opacity:0.5; /*opacity不為1產(chǎn)生層疊上下文*/
}
.d1{
width:100px;height:100px;background:green;
position:relative;top:-20px;left:-20px;
z-index:-1;
}
- 元素的
transform值不是none细卧。
<div class="box">
<div class="d1"></div>
</div>
.box{
margin:100px;background:blue;
transform:rotate(15deg); /*任意非none值*/
}
.d1{
width:100px;height:100px;background:green;
position:relative;top:-20px;left:-20px;
z-index:-1;
}
- 元素
mix-blend-mode值不是normal。
- 元素的
filter值不是none筒占。
- 元素的
isolation值是isolate贪庙。
-
position:fixed聲明。
-
will-change指定的屬性值為上面任意一個(gè)翰苫。
- 元素的
-webkit-overflow-scrolling設(shè)為touch止邮。
-webkit-overflow-scrolling屬性控制元素在移動(dòng)設(shè)備上是否使用滾動(dòng)回彈效果.
-
auto使用普通滾動(dòng), 當(dāng)手指從觸摸屏上移開(kāi)这橙，滾動(dòng)會(huì)立即停止。 -
touch使用具有回彈效果的滾動(dòng), 當(dāng)手指從觸摸屏上移開(kāi)导披，內(nèi)容會(huì)繼續(xù)保持一段時(shí)間的滾動(dòng)效果屈扎。繼續(xù)滾動(dòng)的速度和持續(xù)的時(shí)間和滾動(dòng)手勢(shì)的強(qiáng)烈程度成正比。同時(shí)也會(huì)創(chuàng)建一個(gè)新的堆棧上下文撩匕。
z-index 與其它 css 屬性層疊上下文的關(guān)系
- 不支持z-index即上面的9中css屬性的層疊上下文元素的層疊順序均是
z-index:auto級(jí)別鹰晨。 - 依賴(lài)z-index的層疊上下文元素的層疊順序取決于z-index的值。
依賴(lài)z-index值創(chuàng)建層疊上下文的情況：
-
position值為relative/absolute或fixed(部分瀏覽器)止毕。 -
display:flex|inline-flex容器的子flex項(xiàng)模蜡。
z-index 最佳實(shí)踐
- 最小化影響原則
- 避免使用定位屬性
- 定位屬性從大容器平級(jí)分離為私有小容器
- 不犯二準(zhǔn)則
- 對(duì)于非浮層元素，避免設(shè)置 z-index 值滓技，靈活應(yīng)用層疊順序哩牍、后來(lái)居上棚潦、層疊上下文等技巧令漂。
- z-index 值沒(méi)有任何道理需要超過(guò)2
- 組件層級(jí)計(jì)數(shù)器
- 通過(guò)js獲取body下子元素的最大z-index值
- 可訪(fǎng)問(wèn)性隱藏
- 利用z-index負(fù)值元素在層疊上下文的背景之上，其它元素之下丸边，達(dá)到隱藏不可見(jiàn)效果叠必。
