変換された要素で z-index が失敗する理由とその修正方法は?

変換のため z-index がキャンセルされました

提供されたコードでは、CSS プロパティ z-index は要素に適用されると機能を失います。変換プロパティを適用した後にテストします。この問題は、transform プロパティが要素の新しいスタッキング コンテキストを確立するために発生します。

スタッキング コンテキストは、重複する要素が表示される順序を決定します。通常、同じスタッキング コンテキスト内では、より高い z-index 値を持つ要素が、より低い z-index 値を持つ要素の上に表示されます。ただし、z-index は単一のスタッキング コンテキスト内にのみ適用されます。

このシナリオでは、transform プロパティを持つ .test 要素が独自のスタッキング コンテキストを作成しています。疑似要素 .test:after は、.test の子ですが、この新しいスタッキング コンテキスト内に残ります。したがって、.test:after で z-index: -1 を設定すると、.test のスタッキング コンテキスト内に配置されるだけで、.test の背後には配置されません。

これを解決するには、**新しい.test と .test:after** の両方をコンテナ要素でラップすることにより、コンテキストをスタックします。このアプローチにより、それらが同じスタッキング コンテキストを共有することが保証され、z-index` が期待どおりに機能できるようになります。

変更されたコードは次のとおりです:

.wrapper {
    -webkit-transform: rotate(10deg);
}
.test {
       width: 150px;
       height: 40px;
       margin: 30px;
       line-height: 40px;
       position: relative;
       background: white;
}
.test:after {
       width: 100px;
       height: 35px;
       content: "";
       position: absolute;
       top: 0;
       right: 2px;
       -webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */
       -webkit-transform: rotate(3deg); /* Safari and Chrome */
       transform: rotate(3deg);
       z-index: -1;
}

.wrapper 用に別のスタッキング コンテキストを作成することによって、.test と .test:after は両方とも同じコンテキストを共有します。これにより、z-index は、目的の回転を維持しながら、.test:after を .test の後ろに正しく配置できるようになります。

以上が変換された要素で z-index が失敗する理由とその修正方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。