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玩回来与表情图案和有什么栈你喜欢。 如果不是你所需要的，请用你需要的更具描述性，也许我会从头做一个演示。