Z-インデックスを使用しているCSSは、親要素の背後に子要素を配置しません。

ヘッダーからスライドするドロップダウンメニューを作成しようとしています。私はヘッダを持っており、その中にborder-bottomの1pxラインと背景色のdivがあります。この部門内では、ロゴ、検索ボックス、リンク、ユーザープロファイルボタンを配置したいと思います。このボタンをクリックすると、このボタンの下にあるメニューがドロップダウンされます。残念ながら、このドロップダウンメニューはヘッダーの前に表示され、ヘッダーの背後からはスライドされません（ヘッダーの背景と下の境界線は見えなくなります）。私は以下のような解決策を試みました（簡略版です）。Z-インデックスを使用しているCSSは、親要素の背後に子要素を配置しません。

header { 
 
    position: relative; 
 
    z-index: 5; 
 
} 
 

 
.dropdown { 
 
    background-color: yellow; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.background { 
 
    position: absolute; 
 
    background-color: #ccca; 
 
    border-bottom: 1px solid black; 
 
    width: 100%; 
 
    height: 50px; 
 
    z-index: 2; 
 
}

<header> 
 
    <div class="background"> 
 
    <div class="dropdown"> 
 
    </div> 
 
    </div> 
 
</header>

私は多くのzインデックスの設定を試してみましたが、それらのどれも動いていないようにみえます。 1. div.background（Z-インデックス2）、div.dropdown（Z-インデックス1またはさらに-1） 2. div.background、Z-インデックスおよび位置なし、div.dropdown with z-index -1ヘッダーの後ろでメニューリンクが機能しなくなり、メニューもウェブページの主な内容の背後にありました）

div.dropdownを背景と枠の境界線の後ろからスライドさせるにはどうすればよいですか？下位要素としてヘッダdivツリー内にこのdiv.dropdownを持つことはできません。

出典

2017-12-06 Michał Ziobro

z-indexは、DOM内の同じレベルの要素、つまり同じ親を持つ要素に基づいています。

class="dropdown"要素は、class="background"要素の子であるため、その親の下には置くことはできません。

出典

2017-12-06 17:49:33 Intervalia

これは、負のZ-インデックスで可能です。ただし、非auto z-indexを持つ親要素では機能しません。 .background要素をz-index:autoに設定します（または、取り除くだけです）。autoがデフォルトです。負のz-索引要素が<html>または<body>要素を下回るのを避けるために、肯定的なz-索引を持つ祖先要素を持つことはOKです（そして、これをお勧めします）。この場合、あなたは（headerはZ-indexが5です）、それは問題ありません。

<html> 
 
<head> 
 
<style type="text/css"> 
 
header { 
 
\t position:relative; 
 
\t z-index:5; 
 
\t 
 
} 
 
.dropdown { 
 
\t background-color: yellow; 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t position: absolute; 
 
\t z-index: -1; 
 
} 
 
.background { 
 
\t position: absolute; 
 
\t background-color:#ccca; 
 
\t border-bottom: 1px solid black; 
 
\t width: 100%; 
 
\t height: 50px; 
 
\t z-index: auto; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<header> 
 
\t <div class="background"> 
 
\t \t <div class="dropdown"> 
 
\t \t </div> 
 
\t </div> 
 
</header> 
 
</body> 
 
</html>

出典

2017-12-06 17:53:40

子要素は、親の下に表示することができません。このように2つのdivsを別々の要素にします。

header { 
 
\t position:relative; 
 
\t z-index:5; 
 
} 
 
.dropdown { 
 
\t background-color: yellow; 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t position: absolute; 
 
    z-index: 1; 
 
} 
 
.background { 
 
\t position: absolute; 
 
\t background-color:#ccca; 
 
\t border-bottom: 1px solid black; 
 
\t width: 100%; 
 
\t height: 50px; 
 
\t z-index: 2; 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 
<header> 
 
    <div class="background"></div> 
 
    <div class="dropdown"></div> 
 
</header> 
 
</body> 
 
</html>

出典

2017-12-06 17:55:48

もちろん彼らがすることができます。 – VXp

div.dropdownのZ-インデックスが-1のときにリンクが再び動作するように、私のヘッダー（角2コンポーネント）に{display：block}を追加する必要があります –

Z-インデックスを使用しているCSSは、親要素の背後に子要素を配置しません。

答えて

関連する問題