CSS の子要素の Z インデックスと親要素の兄弟ノードの階層問題を解決する

1. 問題の出現

フラット リストを作成しました。リストの一部には、マウスをホバーすると表示されるポップアップ ボックスがあります。望ましい目標は、ポップアップ ボックスが表示されるときにリスト項目のコンテンツをカバーし、ポップアップ ボックスのコンテンツが最初に表示されるようにすることです。

要素の構造はおおよそ次のようになります。

<div class="list">
    <div class="unit">
        <div class="content">リスト項目 1</div>
        <div class="hover">ポップアップ ボックス 1</div>
    </div>
     <div class="unit">
        <div class="content">リスト項目 2</div>
    </div>
     <div class="unit">
        <div class="content">リスト項目 3</div>
        <div class="hover">ポップアップボックス 3</div>
    </div>
</div>

スタイルの一部は次のとおりです。

。ユニット{
    位置: 相対的;
    zインデックス: 1;
}
.ホバー{
    位置: 絶対;
    zインデックス: 10;
}

実際の効果は次の通りです。

リスト項目 1 のポップアップ ボックスは自身のコンテンツをカバーすることはできますが、リスト項目 2 のコンテンツをカバーすることはできません。

2. 原則

ポップアップ ボックスの z-index 値は、リスト項目の親要素 (兄弟要素を含む) の z-index 値よりも大きいため、すべてのリスト項目の内容をカバーする必要があるようです。

しかし、実のところ、私はここで最も基本的な点を見落としていました。ポップアップ ボックスはリスト項目の子要素であるため、その z-index 値のサイズは、ポップアップ ボックスの兄弟要素と比較した場合にのみ意味を持ちます。親要素（リスト項目）の内容との階層については、親要素の階層関係を見る必要があります。

各リスト項目はパラレルワールドであると想像できます。パラレルワールド内に設定された z-index は、このワールド内の他のコンテンツと比較した場合にのみ意味を持ちます。他のパラレルワールドと比較したい場合は、申し訳ありませんが、これは次元抑制機能を備えています。別のパラレルワールドのレベルが自分の世界よりも高い場合、自分の Z インデックスをどれだけ高く設定しても、それは内部優位性に過ぎず、別の世界のフロアよりも高くなることはありません。

上記の例では、すべてのリスト項目の z-index が 1 に設定されていますが、表示順序に従って、2 番目のリスト項目が 1 番目のリスト項目よりも高いため、リスト項目 1 のすべての内容がリスト項目 2 によって覆われることになります。

3. 解決策

現時点で考えられる唯一の解決策は、ポップアップ ボックスとリスト項目を同じレベルに設定し (兄弟要素になる)、ポップアップ ボックスの z-index 値をリスト項目の z-index よりも大きくし、js を使用して各ポップアップ ボックスの位置を手動で設定することです。

CSS における子要素の z-index と親要素の兄弟ノードの階層問題を解決する方法についての記事はこれで終わりです。CSS z-index 階層に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。