帶有生成的內容/僞元素的轉換後的元素不符合z-index

Question

基本上，如果你看看this，你會看到我有一個元素，其中應用了一個已生成內容的變換。 :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; 
    } 
}