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

私は回転Xを削除せずにZインデックスを動作させるための方法を知っていますか？

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インデックスと遊ぶとあなたが好き積み重ねるものを持つことができます。 あなたが必要としているものでない場合は、必要なものをさらに説明してください。多分私はデモを最初から作ります。