z-index not working with rotateX

Question

I am trying to apply a z-index on a child inside a element with rotateX. If I remove rotateX it works fine, but I can't actually remove it.

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

Live version here: https://jsbin.com/qirowoteti/1/edit?html,css,output

Do I know a way to make z-index work without removing rotateX?

Possible duplicate of [z-index is canceled by setting transform(rotate)](https://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate) — Rodrigo Leite, Jul 16 '17 at 06:51

score 0 · Answer 1 · answered Jul 16 '17 at 08:28

For me is not clear what you try to do, but! You must change DOM structure like this:

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

Now you can play with z-index for back vs. emoji and have what stack you like. If it's not what you need, please be more descriptive with what you need, maybe I will make a demo from scratch.

Emoji needs to be inside .back div. So I will try to explain better what I want to do. I basically have this concept of a "card" with a text inside. When I click on a edit icon it flips the card and then you can edit then click on the emoji to open the tooltip. What I want to do is insert a tooltip to be able to add emojis to the textarea. You can see a live version here: https://blinding-torch-6662.firebaseapp.com/#bc02ab4f-e293-46b1-a940-0c1379994d82 The problem is that the tooltip always end up underneath the other cards. — Glauber, Jul 16 '17 at 19:37

z-index not working with rotateX

1 Answers1