使用 z-index 堆叠，子元素在父元素之上

Question

我运行参加了这个挑战：fiddle。简而言之，我想让绿色块位于 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 地图元素。我以前的解决方案在地图上有一个绝对定位的子元素，它可以工作，但我不知道如何让它响应。

我的新解决方案从响应角度来看效果很好，但后来我发现父项阻止了与地图的交互。

所以我现在需要一个在 Google 地图上有一些响应元素的解决方案。

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 添加到您的 fiddle 并添加这行代码以实际将绿色元素移动到黄色元素来实现您的目标：

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

使用 z-index 堆叠，子元素在父元素之上

stacking with z-index, child element on top over parent sibling

html

css

z-index

twitter-bootstrap