z-index 與 css 定位屬性
z-index 只對定位元素有作用。
{position:relative;z-index:2;}
{position:absolute;z-index:2;}
{position:fixed;z-index:2;}
{position:sticky;z-index:2;}
如果定位元素z-index沒有發生嵌套：
- 后來居上；
- 哪個值大哪個在上；
如果定位元素z-index發生嵌套：
- 以祖先元素為標準(
z-index不為auto)
css 中的層疊上下文和層疊等級
層疊上下文是HTML元素中的一個三維概念，表示元素在z軸上距離人眼更近。
具有層疊上下文的元素：
- 頁面根元素天生具有層疊上下文，稱為“根層疊上下文”。
- z-index 值為數值的定位元素具有層疊上下文。
- 其它屬性
層疊上下文中的每個元素都有一個層疊等級，決定了同一個層疊上下文中元素在z軸上的顯示順序。遵循“后來居上”和“誰值大誰在上”的層疊準則。
層疊等級(stacking level) 和 z-index 不是一個東西。普通元素也有層疊等級。
層疊等級是放在同一個層疊上下文中來進行比較的，不在同一個層疊上下文中沒有意義。
層疊上下文的特性
- 層疊上下文可以嵌套，組合成一個分層次的層疊上下文。
- 每個層疊上下文和兄弟元素獨立：當進行層疊變化或渲染時，只影響后代元素。
- 每個層疊上下文是自成體系的：當元素的內容被層疊后，整個元素被認為是在父層的層疊順序中。
層疊順序
層疊順序表示元素發生層疊時特定的垂直顯示順序。
7階層疊等級(stacking level)
層疊等級的比較要在同一個層疊上下文中
看下面的例子：
.inline-block{
display:inline-block;
background:olive;
margin:-30px;
}
.block{
display:block;
background:green;
}
z-index 與層疊上下文
- 定位元素默認
z-index:auto可以看成是z-index:0；
為何定位元素會覆蓋普通元素？
定位元素默認
z-index:auto，根據層疊順序表z-index:auto是大于inline/inline-block的，所以定位后，就會覆蓋普通元素。
- z-index 不為 auto 的定位元素會創建層疊上下文；
從層疊順序上講，
z-index:auto可以看成是z-index:0；
但從層疊上下文來講，z-index:auto不會產生層疊上下文，z-index:0則會產生層疊上下文。
- z-index 層疊順序的比較止步于父級層疊上下文；
其它具有層疊上下文的css屬性
-
z-index值不為auto的子 flex 項(父元素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產生層疊上下文*/
}
.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指定的屬性值為上面任意一個。
- 元素的
-webkit-overflow-scrolling設為touch。
-webkit-overflow-scrolling屬性控制元素在移動設備上是否使用滾動回彈效果.
-
auto使用普通滾動, 當手指從觸摸屏上移開，滾動會立即停止。 -
touch使用具有回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。
z-index 與其它 css 屬性層疊上下文的關系
- 不支持z-index即上面的9中css屬性的層疊上下文元素的層疊順序均是
z-index:auto級別。 - 依賴z-index的層疊上下文元素的層疊順序取決于z-index的值。
依賴z-index值創建層疊上下文的情況：
-
position值為relative/absolute或fixed(部分瀏覽器)。 -
display:flex|inline-flex容器的子flex項。
z-index 最佳實踐
- 最小化影響原則
- 避免使用定位屬性
- 定位屬性從大容器平級分離為私有小容器
- 不犯二準則
- 對于非浮層元素，避免設置 z-index 值，靈活應用層疊順序、后來居上、層疊上下文等技巧。
- z-index 值沒有任何道理需要超過2
- 組件層級計數器
- 通過js獲取body下子元素的最大z-index值
- 可訪問性隱藏
- 利用z-index負值元素在層疊上下文的背景之上，其它元素之下，達到隱藏不可見效果。
