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