不透明度と Z インデックス: Z インデックスが半透明の要素では常に機能しないのはなぜですか?

不透明度と Z インデックス: 非表示のオーバーレイ

Web ブラウザーで要素を階層化する場合、不透明度と 2 つの重要なプロパティが機能します。 z インデックス。不透明度は要素の透明度を制御し、z-index は重なり順での位置を決定します。しかし、これらのプロパティ間の驚くべき相互作用が発見されました。

問題: 真っ向から矛盾しています

「ポップアップ ウィンドウ」がウィンドウの上に追加されるシナリオを考えてみましょう。ネイビースクエア。直観的には、四角形がポップアップの下に完全に隠れていることが予想されます。ただし、正方形の不透明度が 1 未満 (例: 0.3) に設定されている場合、正方形の一部はポップアップ ウィンドウの下に表示されたままになります。

謎を解く

この動作はバグではなく、Web ブラウザによる意図的な設計上の選択です。 CSS カラー モジュールに従って、不透明度が 1 未満の要素は新しいスタッキング コンテキストを作成します。したがって、z-index 値に関係なく、このコンテキストの外側にある要素をコンテキスト内で階層化することはできません。

サイレント スタッキング コンテキスト

デフォルトでは、位置決めされていない要素は1 未満の不透明度は、「z-index: 0」および「opacity: 1」であるかのように扱われます。これは、実際の Z-index 値に関係なく、それらが親スタッキング コンテキストの一番下にあるかのように、常に同じスタッキング順序でレンダリングされることを意味します。

競合の解決

この動作を修正するには、完全に非表示にする必要がある要素に対して 1 未満の不透明度の値を使用しないようにするだけです。あるいは、「position:Absolute」や「​​position:fixed」などの CSS プロパティを使用して要素の不透明度が 1 未満の位置に要素を配置すると、「z-index」プロパティがその中での積み重ね順序を制御するため、目的の積み重ね順序を実現できます。不透明度によって作成された新しいスタッキング コンテキスト。

以上が不透明度と Z インデックス: Z インデックスが半透明の要素では常に機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。