帶有幾個絕對定位元素的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>