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は指定されたメモリで操作を実行します

次のように: -m, --memory メモリ制限。形式は数値と単位です。単位は b、k、m、g の...

Zookeeper 不正アクセス テストの問題

目次序文Zookeeper サービスのオープンを検出情報を入手する接続テスト接続先修理計画参照する序...

SQL グループ化により重複を削除し、他のフィールドで並べ替える

必要:あるフィールドの同一項目を結合し、別の時間フィールドで並べ替えます。例:初めに テーブルから都...

CSS のフローティング サンプル コードをクリアする方法

概要この記事のフレームワーク図は次のとおりです。 1. フローティングとは一体何でしょうか? W3s...

Mysql が CPU を過剰に占有する場合の最適化方法 (必読)

Mysql が CPU を占有しすぎる場合、どこから最適化を開始すればよいでしょうか? CPU 使...

MySQLバッチは特定のフィールドのスペースを削除します

Mysql で特定のフィールドからスペースを一括削除する方法はありますか?文字列の前後のスペースだけ...

JavaScript 以外の静的リソースのバンドルの詳細

目次1. パッケージングツールでのカスタムインポート2. ブラウザとバンドラの共通インポート構文3....

Nginx アクセス ログとエラー ログ パラメータの説明

例: nginx ログには、アクセス ログとエラー ログの 2 つの主な種類があります。アクセス ロ...

mysqlはエクスポートされたデータのsqlファイルから指定されたテーブルのみをインポートすることを実装します

シナリオ昨日、システムは dbAll.sql.gz という名前の特定のデータベースのすべてのテーブル...

SpringbootはDockerデプロイメントを統合し、Dockerイメージを構築する2つの方法を実装します。

Docker は、あらゆるアプリケーション用の軽量でポータブルな自己完結型コンテナーを簡単に作成で...

mysqlを使用して、URLから返されたhttp GETリクエストデータを記録します。

ビジネスシナリオの要件と実装ロジックの分析ビジネスでは、HTTP GET を使用してデータを要求する...

vue3 でブロック崩しゲームを開発する方法をステップバイステップで教えます

序文vue3 を使った例をいくつか書いてみましたが、Vue3 のコンポジション API はよく設計さ...

Mysql InnoDBとMyISAMの違いの分析

MySQL は、myisam、innodb、memory、archive、example など、多く...

MySQL で削除されたレコードが有効にならない理由のトラブルシューティング

オンライン MySQL トランザクションの問題の記録先週の金曜日、大きなテーブルを削除する操作を実行...

Docker環境にJenkinsコンテナをインストールする詳細なチュートリアル

推奨される Docker 学習教材: https://www.runoob.com/docker/d...