css - 子元素的z-index如何高於父元素的兄弟元素的z-index值？

Question

1.文字描述如下： 有A、B兩個同級div，A的z-index為888，B的z-index為999，A下有H，z-index為1000,但是發現H並沒有在B的上層，不改變層次結構能否使H在B的上層？ 2.代碼描述如下 {代碼...} 3.可以改變任意樣式，...

学习ing · Answer

依照規範，z-index是應用在定位元素的，也就是position屬性不為relative的元素，否則，設定z-index是沒有意義的；
z-index的作用有兩點，一是設定在目前堆疊上下文(stacking context)中的層級；二是創建一個新的堆疊上下文；
z-index並不是設定的值越高，就會越靠近用戶，還和堆疊上下文有關係；

在同一個堆疊上下文中的元素，z-index越高越靠近使用者；
在不同堆疊上下文中的元素，如果堆疊上下文一距離用戶更近，那麼它的所有子元素都在另一個堆疊上下文子元素的前面，也就是離用戶更近，不同堆疊上下文中的子元素不可能發生交叉；
所以，z-index其實不是絕對值，而是相對值；

舉例如下：

body {
    margin: 0;
}

.p1 {
    width: 700px;
    height: 700px;
    background: red;
}

.p1p1 {
    width: 300px;
    height: 300px;
    background: green;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 500;
}

.p1p1p1 {
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute;
    z-index: 10;
}

.p2 {
    width: 600px;
    height: 600px;
    background: pink;
    position: absolute;
    z-index: 400;
    top: 0;
}

.p2p1 {
    width: 500px;
    height: 500px;
    background: blueviolet;
    position: absolute;
    z-index: 800;
}

對於.p1p1p1和.p2p1，雖然後者的z-index(800)高於前者(10)，但是因為前者所在的堆疊上下文(.p1p1)的z-index(500)高於後者所在的堆疊上下文(.p2p1)的z-index(400)，所以前者是在後者上面的。

評論裡面你設定p{z-index:9;position:relative;}會建立一個新的堆疊上下文，和p同級的元素是0，img元素是9 -1，因為9 >0，所以img是在上面的。

依照你的題目，其實position屬性是不能改的，如果把position屬性改為relative，那你的z-index屬性其實就不起作用了，在z-index都起作用的情況下，是沒有辦法達到你的要求的，理由如下：

A 888
H 888 1000
B 999

A, B和H的層級如上，因為888

扔个三星炸死你 · Answer

不能。因為你的H和B都是position: absolute，可以認為，絕對定位的元素在z軸上的偏移量遠大於z-index可以設定的量（可以認為絕對定位元素有著無窮大的z偏移）。因此，H和B兩個元素的z-index其實並沒有起到任何作用。

去掉了position: absolute之後，程式碼如下


    

        This is a heading

效果：

学习ing · Answer

首先A,B,H都是絕對定位，然後z-index,B>A了，自然而然，B就擋住了A，H在A裡面，又是絕對定位於A，自然也就擋住H了，解決方法就是設定z-index,A>B就行了。這樣佈局，H的z-index，沒有實在的意義(只要遮住了A，也就遮住了H)！除非H不在A裡面！

迷茫 · Answer

可以想像成每一個元素的z-index都聲明了一個平面世界，平面世界的高度就是z-index的值。而子元素的z-index都是在這個世界相比較。

代言 · Answer

如果外面的z-index前者小於後者，沒有辦法讓前者的子節點超過後者，只能改變層級，不過這樣子的話，前者就可能把後者全都檔住了，所以樓主還是把H從A中拿出來對應的層級設定好就能達到效果了

ringa_lee · Answer

不能父級限制了子元素的位置