使用z-index堆疊，子元素位於父級兄弟之上

Question

我遇到了這個挑戰： 小提琴 。 簡短的故事是，我希望在z順序的中間有綠色塊，而不必更改HTML。 底部為黃色，中間為綠色，頂部為紅色。

 .parent { background-color: yellow; position: absolute; top: 0; left: 0; height: 200px; width: 200px; z-index: 1; } .child { background-color: red; position: relative; top: 10px; left: 20px; height: 50px; width: 150px; z-index: 100; } .other-guy { background-color: green; position: absolute; top: 40px; left: 100px; height: 200px; width: 200px; z-index: 50; } 

 <div class="parent"> Chillin in the background <div class="child"> I really want to be on top. </div> </div> <div class="other-guy"> I want to be in the middle! </div> 

更長的故事是，在我的解決方案中，我使用bootstraps網格系統來定位子元素，因此整個事情都是響應式的。 中間層是需要由用戶操縱的Google Maps元素。 我以前的解決方案在地圖上有一個絕對定位的子元素，它有效，但我不知道如何使其響應。

我的新解決方案在響應角度下運行良好，但后來我發現父級阻止了與地圖的交互。

所以我現在需要一個解決方案，在谷歌地圖上有一些響應元素。

Answer 1

我從黃色div中刪除了絕對位置，並從綠色div中刪除了z-index。 也許這就像你說的那樣。

 .parent { background-color: yellow; top: 0; left: 0; height: 200px; width: 200px; z-index: 1; } .child { background-color: red; position: relative; top: 10px; left: 20px; height: 50px; width: 150px; z-index: 2; } .other-guy { background-color: green; position: absolute; top: 40px; left: 100px; height: 200px; width: 200px; } 

 <div class="parent">Chillin in the background <div class="child">I really want to be on top.</div> </div> <div class="other-guy">I want to be in the middle!</div> 

Answer 2

看看這篇文章：

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

如果這篇文章是正確的，我理解正確，那么這是不可能的，因為黃色和紅色是同一堆疊上下文的一部分。

我確實通過向你的小提琴添加jquery來實現你的目標，並添加這行代碼來實際將綠色元素移動到黃色元素中：

$(".other-guy").insertAfter(".child");