Css z索引不适用于rotateX

我正在尝试对rotateX元素中的子元素应用z索引。如果我移除rotateX，效果很好，但实际上我无法移除它

。消息{
位置：相对位置；
填充底部：40px；
}
.回来{
位置：绝对位置；
背景：白色；
变换：旋转（0度）；
}
.表情符号{
位置：绝对位置；
z指数：9999；
背景：红色；
}

布拉
fjoiefj

oiejfoisjj
布拉
布拉
对我来说，不清楚你想做什么，但是！
必须按如下方式更改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;
}


布拉
fjoiefj

oiejfoisjj
布拉
布拉
.留言{
位置：相对位置；
填充底部：40px；
}
.回来{
位置：绝对位置；
背景：白色；
变换：旋转（0度）；
z指数：12；
背景：绿色；
}
.表情符号{
位置：绝对位置；
z指数：9；
背景：红色；
}

现在，您可以使用z-index进行back vs.emoji游戏，并拥有您喜欢的堆栈。
如果不是您需要的，请更详细地描述您需要的内容，也许我会从头开始制作一个演示。
可能是重复的，我尝试应用包装，但没有解决问题。表情符号需要放在里面。返回div。因此我将尝试更好地解释我想要做什么。我基本上有“卡片”的概念，里面有文字。当我点击编辑图标时，它会翻转卡片，然后你可以编辑，然后点击表情符号打开工具提示。我想做的是插入一个工具提示，以便能够将表情添加到文本区域。你可以在这里看到一个实时版本：问题是工具提示总是在其他牌的下面。