z-index不能與rotateX一起使用

Question

我想在rotateX的元素內的子元素上應用z-index。如果我刪除rotateX它可以正常工作，但我實際上不能刪除它。

.message { 
 
    position: relative; 
 
    padding-bottom: 40px; 
 
} 
 

 
.back { 
 
    position: absolute; 
 
    background: white; 
 
    transform: rotateX(0deg); 
 
} 
 

 
.emoji { 
 
    position: absolute; 
 
    z-index: 9999; 
 
    background: red; 
 
}

<div class="message"> 
 
    <div class="back"> 
 
    bla 
 
    <div class="emoji"> 
 
     fjoiefj<br /> 
 
     oiejfoisjj 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="message"> 
 
    <div class="back"> 
 
    bla 
 
    </div> 
 
</div> 
 

 
<div class="message"> 
 
    <div class="back"> 
 
    bla 
 
    </div> 
 
</div>

現場版本在這裏：https://jsbin.com/qirowoteti/1/edit?html,css,output

我認識一個方法，使z-index的工作，而不刪除rotateX？

Answer 1

對於我不清楚你想做什麼，但！ 你必須改變DOM結構是這樣的：

<div class="message"> 
    <div class="back"> 
    bla  
    </div> 
    <div class="emoji"> 
     fjoiefj<br /> 
     oiejfoisjj 
    </div> 
</div> 

<div class="message"> 
    <div class="back"> 
    bla 
    </div> 
</div> 

<div class="message"> 
    <div class="back"> 
    bla 
    </div> 
</div> 

.message { 
    position: relative; 
    padding-bottom: 40px; 
} 

.back { 
    position: absolute; 
    background: white; 
    transform: rotateX(0deg); 
    z-index: 12; 
    background: green; 
} 

.emoji { 
    position: absolute; 
    z-index: 9; 
    background: red; 
} 

現在你可以用z-index玩回來與表情圖案和有什麼棧你喜歡。 如果不是你所需要的，請用你需要的更具描述性，也許我會從頭做一個演示。