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