關于z-index我們的共識

共識一

首先，我們都同意，z-index對于普通盒子是無效的，這里的“普通盒子”是除了下文我會提到的“神奇盒子”外的所有盒子，至于什么是“神奇盒子”請慢慢看。?
對于普通盒子，不管z-index值如何，寫在html文檔中后面的塊會在寫在前面的盒子上面，float的盒子會在沒有float的盒子上面，文字等inline、inline-block元素會在block元素的上面。

以下所有代碼示例請查看github查看完整源碼

<div class="first">first div</div><div class="second">second div</div><div class="inline">inline div</div><div class="float_first">first float div</div><div class="float_second">second float div</div>

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

div{width: 100px;height: 200px;border: 2px solid silver;}.first{background-color: blue;}.second{background-color: red;}.inline{display: inline-block;background-color: pink;}.float_first{float: left;background-color: green;}.float_second{float: left;background-color: orange;}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

x軸、y軸位置我是在chrome中用margin-top負值和margin-left正值調的，結果如下：?
?
不管我如何給first div加z-index，哪怕給個9999這么大值，second div還是在其上面，其他塊同理，z-index不能影響上圖視軸（z軸）順序，html標簽順序會影響first div、second div及first float div、second float div視軸高低。所以說，z-index不是給這些盒子使用的。

共識二

對于受z-index控制的，姑且稱之為“神奇”的盒子（其實就是很多博客說的 stacking context，層疊上下文 ），z-index值越大其視軸越高，離用戶越近，最大的就在最上面，會遮擋其他神奇盒子。?
這點不用我舉例吧，很多人都習慣寫z-index:900這種樣式，就是想讓這個盒子在最上面，當又出現一個盒子，就不得不寫z-index:901這種讓人迷糊的樣式。

兩個共識引出的一個問題

了解以上兩個共識以后，你有沒有想過這個問題，那么z-index 負值 與 普通盒子們誰在上面呢？

神奇盒子（層疊上下文）與普通盒子的視軸排列

我首先想介紹下層疊上下文，也就是什么樣的盒子是神奇的盒子。

具有哪些樣式的盒子會成為神奇盒子（層疊上下文）

首先，我們最常見的定位不是static的盒子，是神奇盒子，其他創建神奇盒子的方式我引用的博客的總結，如下：

• z-index值不為auto的flex項(父元素display:flex|inline-flex).
• 元素的opacity值不是1.
• 元素的transform值不是none.
• 元素mix-blend-mode值不是normal.
• 元素的filter值不是none.
• 元素的isolation值是isolate.
• will-change指定的屬性值為上面任意一個。
• 元素的-webkit-overflow-scrolling設為touch.?
  關于以上總結，我測試過 opacity和transform ，但引用博客博主靠譜，大家可以親測下。其實，其他我沒測也是因為不常用，大家有個印象就ok。

神奇盒子與普通盒子視軸高度

話不多說，上代碼。

<div class="block">block box</div><div class="absolute">absolute box</div><div class="negative">negative box</div><div class="positive">positive box</div><div class="float">float box</div>

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

html{padding: 200px;}div{width: 200px;height: 100px;border: 5px solid silver;}.block{background-color: green;}.absolute{position: absolute;background-color: blue;margin-top: -60px;margin-left: 40px;}.negative{position: absolute;background-color: red;z-index: -1;margin-top: -140px;margin-left: -20px;}.positive{position: absolute;background-color: purple;z-index: 1;margin-top: -40px;margin-left: 60px;}.float{float: left;background-color: pink;margin-top: -80px;margin-left: 20px;}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37

結果：?
?
結論： html -> z-index負值神奇盒子（絕對定位） -> 塊狀盒子 -> float 盒子 -> z-index auto或者0的神奇盒子（絕對定位） -> z-index正值神奇盒子（絕對定位），視軸越來越高。PS，inline或者inline-block盒子高于float盒子，但低于auto z-index神奇盒子，就是位于粉色和藍色盒子之間。

關于這個結論，你可以這么考慮，在普通盒子視軸排列的基礎上，神奇盒子可以根據z-index值自由穿梭于普通盒子上或下。

以上都是兄弟盒子之間的關系，父子盒子關系很容易理解，子盒子會高于父盒子，不然我們寫的子塊不都被父塊覆蓋了。如果我想知道子盒子與其父盒子的兄弟盒子的關系呢（子盒子與其伯伯盒子的關系）？

當討論嵌套盒子視軸關系時需要注意的問題

這里我只想提醒大家，如果父盒子是神奇盒子，子盒子與其伯伯盒子（子盒子的父盒子的兄弟盒子）的視軸關系是由父盒子與這個伯伯盒子關系決定的。比如：

<div class="father">fahter box <div class="son">son box</div></div><div class="brother">brother box</div>

• 1
• 2

• 1
• 2

div{width: 200px;height: 100px;border: 5px solid silver;position: absolute;}.father{background-color: red;z-index: 0;}.brother{background-color: blue;z-index: 1;}.son{background-color: yellow;z-index: 999;width: 100px;height: 50px;}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

位置請用margin或top、left自己在chrome里調下，你會看到如下圖：?

沒錯，son的z-index為999，但是居然不在最上面，最上面的是 z-index為1的div。這個時候請不要大叫 z-index 失效，這是正常表現。因為son的父盒子father是神奇盒子，它的z-index為0，所以son與brother的關系由father與brother的關系決定，顯然father在下么，那son就得在下，不管你給它設多大的z-index。

一道關于z-index的面試題

最后，既然你已經耐心讀到這了，我就給你出道題考考你。僅使用css如何讓上圖中的brother在son與father中間？也就是，僅使用css如何讓一個盒子位于它的兄弟盒子與兄弟盒子的子盒子中間。?

答案?

div{ width: 200px; height: 100px; border: 5px solid silver;} .father{ background-color: red; } .brother{ background-color: blue; z-index: 1; position: absolute; } .son{ background-color: yellow; z-index: 999; width: 100px; height: 50px; position: absolute; }

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的CSS-合理使用z-index控制盒子视轴高度，解决z-index失效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。