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

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 をよろしくお願いいたします。

<<:  ウェブサイト制作におけるオンライン広告の新しいインタラクティブ体験(グラフィックチュートリアル)

>>:  DOM操作テーブルの例(DOMはテーブルを作成します)

推薦する

Docker イメージを削除できません エラー: そのようなイメージはありません: xxxxxx 解決策

序文docker イメージを削除できません。docker docker imagesを確認すると、イ...

Reactにおけるフックの一般的な使用法

目次1. フックとは何ですか? 2. フックはなぜ現れるのでしょうか? 3. よく使われるフックは何...

JS配列の一般的な方法とテクニックを学び、マスターになりましょう

目次splice() メソッドjoin() メソッド逆() メソッドevery() メソッド削減()...

MySQL ユーザー権限管理の分析例

この記事では、MySQL ユーザー権限管理の例について説明します。ご参考までに、詳細は以下の通りです...

Reactでカスタムフックを作成する方法を教えます

1. カスタムフックとは何かロジックの再利用簡単に言えば、カスタム フックを使用すると、特定のコンポ...

MySQL データベースの 1045 エラーの解決方法

ローカル データベースがサーバー データベースに接続されているときに発生する 1045 の問題を解決...

Ubuntu 16.04 で Python 3 を使用して Django プロジェクトを作成し、実行する方法

ステップ1: Djangoプロジェクトを作成するターミナルを開き、書き込みたいプロジェクトのアドレス...

フォームタグの Enctype 属性とその応用例の紹介

Enctype : ブラウザがデータをサーバーに送り返すときに使用するエンコーディングのタイプを指定...

Winにmysqlをインストールする詳細な手順

この記事では、参考までにWinにmysqlをインストールする詳細な手順を紹介します。具体的な内容は次...

実用的なクイックスタートReactルーティング開発

インストールインストールするには、次のコマンドを入力します。 // ネプ npm で react-r...

Prometheusコンテナのデプロイメントのための実用的なソリューション

環境ホスト名IPアドレス仕えるプロメテウス192.168.237.137プロメテウス、グラファナノー...

CSS3 における構造擬似クラスセレクターと擬似要素セレクターの使い方の詳細な説明

構造擬似クラスセレクタの紹介構造擬似クラスセレクターは、いくつかの特殊効果を処理するために使用されま...

Vue の計算プロパティとプロパティリスニングについての簡単な説明

目次1. 計算プロパティ構文: 1. 省略形:文法: 2. 文章を完成させる: 2. モニタリング(...

リンクされた画像をダウンロードしてアップロードするJavaScriptの実装

写真をアップロードするので、まずはダウンロード可能な画像リソースかどうかを判断する必要があります。正...

MySql 8.0.16 バージョンのインストールでは、「UTF8B3」ではなく「UTF8B4」が使用されるように求められます。

MySQL 8.0.16 にインストールする場合、「UTF8B3」ではなく「UTF8B4」が使用さ...