几个绝对定位元素的 z-index 问题

Question

是否可以将位于绝对定位元素内部并位于另一个绝对定位元素之下的元素置于前台？

例如：

<div id="el1">
  <div id="test1">Test 1</div>
</div>
<div id="el2">
  <div id="test2">Test 2</div>
</div>

CSS：

#el1, #el2, #test1, #test2 {
  position: absolute;
  top: 0;
  left: 0;
}

#el1 {
  z-index: 2;
}

#el2 {
  z-index: 1;
}

#test1, #test2 {
  z-index: 3;
}

所有元素都是绝对定位的，第一个元素位于第二个元素之上。现在我想在前台同时拥有两个测试元素。这是不可能的，因为第二个 z-index 不适用，因为它在 #el2 内部。有什么解决方案吗？还是我必须将测试元素放在其他元素之外？

Answer 1

子元素将继承父元素的z-index。您必须更改标记的结构以反映所需的 z 索引。

<div id="el1">
</div>
<div id="el2">
</div>
<div id="test1">Test 1</div>
<div id="test2">Test 2</div>