使用z-index在div下定位一個元素

我試圖放置一個將在其父元素和其他元素下面的子div。使用z-index在div下定位一個元素

.box1{ 
 
    background-color: blue; 
 
    width: 500px; 
 
    height: 100px; 
 
    position: relative; 
 
    z-index: 3; 
 
} 
 

 
.box2{ 
 
    position: absolute; 
 
    background-color: red; 
 
    width: 200px; 
 
    height: 100px; 
 
    left: 30%; 
 
    top: 20px; 
 
    z-index: 2; 
 
} 
 

 
.box3{ 
 
    background-color: yellow; 
 
    width: 500px; 
 
    height: 100px; 
 
    z-index: 1; 
 
}

<div class="box1"> 
 
    <div class="box2"></div> 
 
</div> 
 
<div class="box3"></div>

我想要放置紅色矩形是在藍色和超過黃色。我把z-index放在其中三個。但是，它不起作用。

您對此有何看法？謝謝！

更新：儘管框是正確的順序，但是，這些箱子裏面的元素現在不能點擊。

您可以在這裏的錯誤看看：https://jsfiddle.net/p1xd6zah/

來源

2017-09-13 Dale Nguyen

藍色和黃色盒具有不同的[堆疊上下文]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context）。由於藍色框的z-索引爲3，黃色的z-索引爲1，所以藍色框及其子**將始終高於黃色**，而不管內部子項的z-索引（你可以將它設置爲1000，它不會改變任何東西）。將紅色夾在兩者之間的唯一方法是確保紅色盒子是另外兩個盒子的兄弟姐妹。 – Terry

你可以做一個破解與z-index：

您可以添加到z-index: -1box2。（堆棧下父的孩子）
添加z-index: -2和position: relative到box3（現堆棧這背後box2）

取出z-index從box1 - 看演示如下：

.box1 { 
 
    background-color: blue; 
 
    width: 500px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 

 
.box2 { 
 
    position: absolute; 
 
    background-color: red; 
 
    width: 200px; 
 
    height: 100px; 
 
    left: 30%; 
 
    top: 20px; 
 
    z-index: -1; 
 
} 
 

 
.box3 { 
 
    background-color: yellow; 
 
    width: 500px; 
 
    height: 100px; 
 
    z-index: -2; 
 
    position: relative; 
 
}

<div class="box1"> 
 
    <div class="box2"></div> 
 
</div> 
 
<div class="box3"></div>

來源

2017-09-13 14:47:54 kukkuz

謝謝kukuz，你的解決方案效果很好！ –

嗨kukuz，還有另一個問題，因爲盒子裏面的元素現在不能點擊。你可以看看嗎？ https://jsfiddle.net/p1xd6zah/ –

這是一個*黑客*充其量，不認爲可以解決... – kukkuz

使用z-index在div下定位一個元素

回答

相關問題