半透明の要素がより高い Z インデックス要素をオーバーライドしているように見えるのはなぜですか?

ブラウザの透明要素と Z インデックス

質問

CSS を使用する場合、不透明度の値が 1 未満の要素は、位置決めされた要素の Z インデックスが高くなると、位置決めされた要素が部分的に表示されたままになります。なぜこのようなことが起こるのでしょうか?

回答

この動作は、ブラウザが透明度を処理する方法の結果です。要素の不透明度の値が 1 未満の場合、要素は画面外で合成され、新しいスタッキング コンテキストが作成されます。要素が配置されていない場合、要素は 0 の Z-インデックスと 1 の不透明度を持つかのように親スタッキング コンテキストでレンダリングされます。

したがって、配置された要素の Z-インデックスがより高い場合でも、配置されていない半透明の要素の上には表示できません。この動作を防ぐには、半透明要素を配置し、それに応じて Z インデックス値を調整することをお勧めします。

以上が半透明の要素がより高い Z インデックス要素をオーバーライドしているように見えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。