使用z-index堆叠，子元素位于父级兄弟之上

Question

我遇到了这个挑战：fiddle。简短的故事是，我希望在z顺序的中间有绿色块，而不必更改HTML。底部是黄色，中间是绿色，顶部是红色。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

更长的故事是，在我的解决方案中，我使用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");