css - 生成されたコンテンツ/疑似要素を含む変換された要素が z-index に準拠していない

Question

基本的に、これを見ると、コンテンツを生成する変換が適用された要素があることがわかります。:after要素は の後ろに表示されるはずですがdiv、そうではありません。!important-ingの量は効果がありません。

疑似要素を の後ろに表示するにはどうすればよいdivですか?

IE 8以下は気にしません。

Answer 1

これは奇妙で望ましくない動作であることが多いですが、予期されていることでもあります。基本的に、要素を変換すると、新しいスタッキング コンテキストが作成されます。これは、疑似要素の場合、基になっている要素の後ろに座ることができなくなることを意味します。

詳細については、この記事を参照してください: https://daneden.me/2012/04/22/css-transforms-and-z-index/

現在、これを解決する唯一の方法は、親要素に新しいスタック コンテキストを作成することです (つまり、ラッパー要素を作成し、それを変換します)。以下に例を示します: http://jsfiddle.net/joshnh/GzWnb/

HTML:

<div class="wrapper">
    <div id="box"></div>
</div>

CSS:

.wrapper {
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
#box{
    width: 200px; 
    height: 200px;
    left: 100px;
    top: 100px;

    background:blue; 
    position: absolute;
    &:after{
        content: "";
        width: 100px;
        background: orange;
        height: 100px;
        position: absolute;
        left: 120px;
        top: 120px;
        z-index: -2!important;
    }
}