几个绝对定位元素的 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>