css - 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

我知道在不删除 rotateX 的情况下使 z-index 工作的方法吗？

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 来对比表情符号和后退，并获得您喜欢的堆栈。如果这不是您需要的，请更详细地描述您的需要，也许我会从头开始制作演示。