「transform」が「z-index」をキャンセルするのはなぜですか?それを修正するにはどうすればよいですか?

変換によってキャンセルされた z-index: スタッキング コンテキストについて

提供されたコードでは、「.test」要素の z-index がキャンセルされます変換プロパティが適用されるとき。この動作を理解するには、スタッキング コンテキストの概念を詳しく理解する必要があります。

自己完結型スタッキング コンテキスト:

transform は、「.test」のスタッキング コンテキストを作成します。要素。スタッキング コンテキストは、z-index 値に基づいて要素の順序を決定します。同じスタッキング コンテキスト内の要素は、Z インデックスに従って階層化され、より高い値が前に表示されます。

継承されたスタッキング コンテキスト:

「.test:after」 " 擬似要素には負の Z インデックス (-1) があります。ただし、この値は、「.test」要素のスタック コンテキスト内での位置にのみ影響します。 z-index は個々のスタッキング コンテキスト内でのみ意味があるため、「.test」の後ろに「.test:after」は配置されません。

問題の解決:

z-index が期待どおりに機能するようにするには、「.test」と「.test:after」が同じスタッキング コンテキストを共有していることを確認します。トランスフォームで「.test」を回転すると独自のスタッキング コンテキストが作成されますが、ラッパー要素を使用して回転すると、「.test:after」が同じコンテキストを継承できるようになります。

ラッパーで更新されたコード:

「.test」を「.wrapper」で囲み、それに変換を適用することで、「.test:after」の z-index 階層を保持します。 ".wrapper" と ".test" の両方をまだ回転させています。

<div class="wrapper">
    <div class="test">z-index is canceled.</div>
</div>

.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;
}

以上が「transform」が「z-index」をキャンセルするのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。