複数の絶対配置要素で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; 
} 

すべての要素が位置決め絶対値であり、第一は、第二の上に横たわっています。今度は、両方のテスト要素をフォアグラウンドで使用したいと考えています。これは不可能です。第2の理由は、＃el2の内側にあるので、z-indexは適用されないからです。これに対して何か解決策はありますか、またはテスト要素を他の要素の外に置く必要がありますか？

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>