關于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;
}