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 イメージを削除できません。docker docker imagesを確認すると、イ...
目次1. フックとは何ですか? 2. フックはなぜ現れるのでしょうか? 3. よく使われるフックは何...
目次splice() メソッドjoin() メソッド逆() メソッドevery() メソッド削減()...
この記事では、MySQL ユーザー権限管理の例について説明します。ご参考までに、詳細は以下の通りです...
1. カスタムフックとは何かロジックの再利用簡単に言えば、カスタム フックを使用すると、特定のコンポ...
ローカル データベースがサーバー データベースに接続されているときに発生する 1045 の問題を解決...
ステップ1: Djangoプロジェクトを作成するターミナルを開き、書き込みたいプロジェクトのアドレス...
Enctype : ブラウザがデータをサーバーに送り返すときに使用するエンコーディングのタイプを指定...
この記事では、参考までにWinにmysqlをインストールする詳細な手順を紹介します。具体的な内容は次...
インストールインストールするには、次のコマンドを入力します。 // ネプ npm で react-r...
環境ホスト名IPアドレス仕えるプロメテウス192.168.237.137プロメテウス、グラファナノー...
構造擬似クラスセレクタの紹介構造擬似クラスセレクターは、いくつかの特殊効果を処理するために使用されま...
目次1. 計算プロパティ構文: 1. 省略形:文法: 2. 文章を完成させる: 2. モニタリング(...
写真をアップロードするので、まずはダウンロード可能な画像リソースかどうかを判断する必要があります。正...
MySQL 8.0.16 にインストールする場合、「UTF8B3」ではなく「UTF8B4」が使用さ...