让div重叠一个div重叠一个div

Question

我在这里有一个旧结构，我设法通过创建 DIV A1 absolute 和其他一些东西来解决，但我不再喜欢那个解决方案了。现在一定有更好的东西。

此示例中的结构未更改很重要。

问题：

• DIV A 和 DIV B 是两个 DIV

• DIV B1 在 DIV B 内

• DIV B1 应该与 DIV A 重叠。可以用负边距和相对位置或类似的东西来实现。

• DIV A1 在 DIV A 内

• DIV A2 位于 DIV A1 内，类似于选择列表

问题 When the selectlist opens it should overlap DIV B1

.body {
  background-color: #eee;
}
.d {
  width: 100%;
  height: 200px;
}
.a {
  background-color: #f00;
}
.b {
  background-color: #00ff0036;
  width: 90%;
  margin: 0 auto;
}
.a1 {
  background-color: #0ff;
  width: 70%;
  height: 100px;
  margin: 0 auto;
  position: relative;
}
.a2 {
  background-color: #8dd7b8;
  width: 70%;
  height: 300px;
  margin: 0 auto;
  position: relative;
}
.b1 {
  background-color: #003cffb0;
  width: 70%;
  height: 200px;
  margin: 0 auto;
  position: relative;
  margin-top: -60px;
}

<div class="body">
  <div class="a d">A
    <div class="a1">A1
      <div class="a2">
        This DIV A2 needs to overlap the blue DIV B1.<br />At the moment it is under DIV B1.<br />While DIV B1 should keep overlapping DIV A.
      </div>
    </div>
  </div>

  <div class="b d">B
    <div class="b1">B1

    </div>
  </div>

</div>

显示所需最终结果的图像：

Answer 1

您已经回答了 99%。您只需要将 z-index: 10 添加到 .a2。因为它应该是一个前端元素。
z-index 属性指定元素的堆栈顺序，堆栈顺序较高的元素始终位于堆栈顺序较低的元素之前。

.body {
  background-color: #eee;
}
.d {
  width: 100%;
  height: 200px;
}
.a {
  background-color: #f00;
}
.b {
  background-color: #00ff0036;
  width: 90%;
  margin: 0 auto;
}
.a1 {
  background-color: #0ff;
  width: 70%;
  height: 100px;
  margin: 0 auto;
  position: relative;
}
.a2 {
  z-index: 10;
  background-color: #8dd7b8;
  width: 70%;
  height: 300px;
  margin: 0 auto;
  position: relative;
}
.b1 {
  background-color: #003cffb0;
  width: 70%;
  height: 200px;
  margin: 0 auto;
  position: relative;
  margin-top: -60px;
}

<div class="body">
  <div class="a d">A
    <div class="a1">A1
      <div class="a2">
        This DIV A2 needs to overlap the blue DIV B1.<br />At the moment it is under DIV B1.<br />While DIV B1 should keep overlapping DIV A.
      </div>
    </div>
  </div>

  <div class="b d">B
    <div class="b1">B1

    </div>
  </div>

</div>