埋め込み絶対divとzインデックス

Question

私はドロップダウンメニューを実装しようとしました。これは別のdivで再利用できます。

私はドロップダウンメニューにposition:relativeを使用しています（それはそれを開いているボタンの下に表示されます）。問題は、ドロップダウンメニューが親divだけをオーバーレイしていることです。私が設定したZ-インデックスに関係なく、ドロップダウンメニューが別の（親ではない）divと重なっていると、アンダーレイになります。

絶対配置されたアイテムを他のものよりも優先するソリューションはありますか？

（私は他の理由のためのzインデックスを使用しなければならない、と私はメニュー表示にすることはできません。相対）

.back, .front, .back2{ 
 
    position: absolute; 
 
    width: 100px; 
 
    color: white; 
 
    line-height: 100px; 
 
    text-align: center; 
 
} 
 

 
.back { 
 
    position:relative; 
 
    z-index: 10; 
 
    top: 20px; 
 
    left: 20px; 
 
    background: red; 
 
} 
 
.back2 { 
 
    position:relative; 
 
    z-index: 10; 
 
    top: 50px; 
 
    left: 20px; 
 
    background: orange; 
 
} 
 

 
.front { 
 
    position: absolute; 
 
    z-index:20; 
 
    top: 60px; 
 
    left: 60px; 
 
    background: green; 
 
}

<div class="back"> 
 
    <span >Parent div1</span> 
 
    <div class="front"> 
 
    <span >dropdown</span> 
 
    </div> 
 
</div> 
 

 
<div class="back2"> 
 
    <span >someOtherDiv</span> 
 
</div>

Answer 1

親のzインデックスを与える必要はありませんがdiv。あなたはparent divにz-index大きなを更新することができ、その場合にはparent divからz-indexを削除することはできませんあなたの質問を1として

.back, .front, .back2{ 
 
    position: absolute; 
 
    width: 100px; 
 
    color: white; 
 
    line-height: 100px; 
 
    text-align: center; 
 
} 
 

 
.back { 
 
    position:relative; 
 
    top: 20px; 
 
    left: 20px; 
 
    background: red; 
 
} 
 
.back2 { 
 
    position:relative; 
 
    top: 50px; 
 
    left: 20px; 
 
    background: orange; 
 
} 
 

 
.front { 
 
    position: absolute; 
 
    z-index:20; 
 
    top: 60px; 
 
    left: 60px; 
 
    background: green; 
 
}

<div class="back"> 
 
    <span >Parent div1</span> 
 
    <div class="front"> 
 
    <span >dropdown</span> 
 
    </div> 
 
</div> 
 

 
<div class="back2"> 
 
    <span >someOtherDiv</span> 
 
</div>

以下の更新スニペットを確認してください。その他の理由（この問題に関連していない）のための チェック以下のスニペットを更新...

.back, .front, .back2{ 
 
    position: absolute; 
 
    width: 100px; 
 
    color: white; 
 
    line-height: 100px; 
 
    text-align: center; 
 
} 
 

 
.back { 
 
    position:relative; 
 
    top: 20px; 
 
    left: 20px; 
 
    background: red; 
 
    z-index:10; 
 
} 
 
.back2 { 
 
    position:relative; 
 
    top: 50px; 
 
    left: 20px; 
 
    background: orange; 
 
    z-index:9; 
 
} 
 

 
.front { 
 
    position: absolute; 
 
    z-index:20; 
 
    top: 60px; 
 
    left: 60px; 
 
    background: green; 
 
}

<div class="back"> 
 
    <span >Parent div1</span> 
 
    <div class="front"> 
 
    <span >dropdown</span> 
 
    </div> 
 
</div> 
 

 
<div class="back2"> 
 
    <span >someOtherDiv</span> 
 
</div>