若干绝对定位元素的z指数问题

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;
}

所有元素都是绝对定位的，第一个元素位于第二个元素之上。现在我想把两个test-element都放在前台。这是不可能的，因为第二个z索引不适用，因为它在#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>