CSS絕對定位＆Z指數

Question

說我有以下HTML：

.wrapper { 
 
    position: relative; 
 
    z-index: 99; 
 
} 
 

 
.red, .green { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.red { 
 
    background: red; 
 
    z-index: 400; 
 
} 
 

 
.green { 
 
    background: green; 
 
}

<div class="wrapper"> 
 
    <div class="red"></div> 
 
</div> 
 
<br> 
 
<div class="wrapper"> 
 
    <div class="green"></div> 
 
</div>

我想紅色框出現在綠盒子的頂部。但事實並非如此。 .wrapper有z-index只有99而.red有z-index: 100。頂部有什麼黑客頂級產品.red？

在此先感謝！

Answer 1

你不想給那些包含這兩個div s a z-index的包裝，因爲它包含這兩個div s。擺脫.wrapper上的z-index。並留下.red類400 z-index，紅色盒子上會出現綠色的頂部：

.wrapper { 
 
    position: relative; 
 
} 
 

 
.red, .green { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.red { 
 
    background: red; 
 
    z-index: 400; 
 
} 
 

 
.green { 
 
    background: green; 
 
}

<div class="wrapper"> 
 
    <div class="red"></div> 
 
</div> 
 
<br> 
 
<div class="wrapper"> 
 
    <div class="green"></div> 
 
</div>

Answer 2

你兩個容器設置爲z-index: 99。因此，由於z-index對於兩者都是相同的，所以源順序決定了Z軸上的位置。

帶有綠色div的.wrapper元素出現在您的代碼中，因此佔上風。上衝的孩子有自認爲重要的是在容器的stacking order沒有影響（切換.wrapper元素的順序，和紅色勝出。）

的z-index: 400。

試試這個：

.wrapper:first-child { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
.wrapper:last-child { 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
.red, .green { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.red { 
 
    background: red; 
 
} 
 

 
.green { 
 
    background: green; 
 
}

<div class="wrapper"> 
 
    <div class="red"></div> 
 
</div> 
 
<br> 
 
<div class="wrapper"> 
 
    <div class="green"></div> 
 
</div>