Question

我正在尝试使用rotateX在元素内的子元素上应用z-index。如果我删除rotateX它工作正常，但我实际上无法删除它。

＆＃13;

.message {
  position: relative;
  padding-bottom: 40px;
}

.back {
  position: absolute;
  background: white;
  transform: rotateX(0deg);
}

.emoji {
  position: absolute;
  z-index: 9999;
  background: red;
}

＆＃13;

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

＆＃13;

此处的实时版本：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进行背对表情符号，并拥有你喜欢的堆栈。如果它不是您所需要的，请更好地描述您的需求，也许我将从头开始制作演示。

z-index不能与rotateX一起使用

1 个答案: