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はテーブルを作成します)
次のように: -m, --memory メモリ制限。形式は数値と単位です。単位は b、k、m、g の...
目次序文Zookeeper サービスのオープンを検出情報を入手する接続テスト接続先修理計画参照する序...
必要:あるフィールドの同一項目を結合し、別の時間フィールドで並べ替えます。例:初めに テーブルから都...
概要この記事のフレームワーク図は次のとおりです。 1. フローティングとは一体何でしょうか? W3s...
Mysql が CPU を占有しすぎる場合、どこから最適化を開始すればよいでしょうか? CPU 使...
Mysql で特定のフィールドからスペースを一括削除する方法はありますか?文字列の前後のスペースだけ...
目次1. パッケージングツールでのカスタムインポート2. ブラウザとバンドラの共通インポート構文3....
例: nginx ログには、アクセス ログとエラー ログの 2 つの主な種類があります。アクセス ロ...
シナリオ昨日、システムは dbAll.sql.gz という名前の特定のデータベースのすべてのテーブル...
Docker は、あらゆるアプリケーション用の軽量でポータブルな自己完結型コンテナーを簡単に作成で...
ビジネスシナリオの要件と実装ロジックの分析ビジネスでは、HTTP GET を使用してデータを要求する...
序文vue3 を使った例をいくつか書いてみましたが、Vue3 のコンポジション API はよく設計さ...
MySQL は、myisam、innodb、memory、archive、example など、多く...
オンライン MySQL トランザクションの問題の記録先週の金曜日、大きなテーブルを削除する操作を実行...
推奨される Docker 学習教材: https://www.runoob.com/docker/d...