他の親に表示される子を持つ2つの親divを処理する方法

Question

headerとbodyという2つのdivがあります。 bodyのコンテンツは、headerを隠蔽することがあります。逆も同様です。しかし、私が知る限り、より高いz-インデックスを持つ、または同じz-インデックスを持つが、コードの上位のdiv（およびそのすべての子）は、常に、より低いz-インデックスまたはより低い - 配置されたdiv（およびそのすべての子）。

どのようにして、ボディにドロップダウンメニューがあるヘッダーと、ヘッダーを含めてすべてをカバーするはずの本体のポップアップフォームを扱うのでしょうか？これは可能ですか？

Answer 1

これはどういう意味ですか？

.a, .b { 
 
    padding: 20px; 
 
    height: 18px; 
 
} 
 

 
.a { 
 
    background-color: red; 
 
} 
 

 
.b { 
 
    background-color: blue; 
 
} 
 

 
.a span { 
 
    padding: 20px; 
 
    height: 18px; 
 
    background-color: yellow; 
 
    display: block; 
 
    position: relative; 
 
    width: 30%; 
 
} 
 

 
.b span { 
 
    padding: 20px; 
 
    height: 18px; 
 
    background-color: green; 
 
    display: block; 
 
    position: relative; 
 
    width: 30%; 
 
    left: 50%; 
 
    top: -60px; 
 
}

<div class="a"> 
 
<span>A</span> 
 
</div> 
 

 
<div class="b"> 
 
<span>B</span> 
 
</div>

Answer 2

.popup { 
 

 
Position: relative; 
 
Top: -0.5em; 
 
Z-index: 3; 
 
background-color: blue; 
 

 
} 
 

 
.dropdown { 
 
Position: absolute; 
 
height: 3em; 
 
Z-index: 2; 
 
Top: 0.75em; 
 

 
Background-color: red; 
 
}

<div> 
 
Some text 
 
<div class="dropdown"> 
 
Middle 
 
</div> 
 

 

 
</div> 
 

 
<div> 
 
Some text 
 
</div> 
 

 

 
<div class="popup"> 
 
TOPPPPPPP 
 
</div>

Zインデックスを使用している場合2つの要素が同じZインデックスを持っていない限りは、HTMLの順序を重要ではありません。一番上の要素に> z-indexを代入するだけです。

あなたは常に最もトップになりたいポップアップを持っている場合、それは身体の最初の要素であるとすると良い答え99