'How to control z-index when using perspective and transform?

I've read a lot of pages talking about z-index and how transform and perspective destroys his context. I understand why my code isn't working what I don't know is how to make it work (or at least use and alternative).

As you can see on the image, the select menu is being covered by the card below.

Image of the problem on the real page

Here is a snippet with a reproduction of the issue:

.square { position: relative; width: 100%; padding-bottom: 100%; }
.square>* { position: absolute; width: 100%; height: 100%; }

/* flip */
/* u -> uncontroled / c -> controled */
.flip { perspective: 200em; }
.flip .front, .flip .back {
	-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;
	backface-visibility: hidden; position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
}
@supports (-webkit-transform-style: preserve-3d) or (-moz-transform-style: preserve-3d) or (transform-style: preserve-3d) {
	.flip .front, .flip .back { 
		-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; transition: 1s;
	}
}
/* -> horizontal */
.flip .front { z-index: 2; transform: rotateY(0deg); perspective: none;}
.flip .back { transform: rotateY(-180deg); }
.flip.u:hover .back, .flip.c.active .back { transform: rotateY(0deg); }
.flip.u:hover .front, .flip.c.active .front { transform: rotateY(180deg); }
/* -> vertical */
.flip.vertical .back { transform: rotateX(-180deg); }
.flip.vertical.u:hover .back, .flip.vertical.c.active .back { transform: rotateX(0deg); }
.flip.vertical.u:hover .front, .flip.vertical.c.active .front { transform: rotateX(180deg);  }

.test {
	position: absolute; top: 70%; left: 10%; background-color: green;
	height: 100px; width: 10px; z-index: 100;
}
<div style="width: 100px; background-color: black">
  <div class="square flip u">
    <div class="front" style="background-color: blue">
      Front
      <div class="test"></div>
    </div>
    <div class="back" style="background-color: red">Back</div>
  </div>
  <hr >
  <div class="square flip u">
    <div class="front" style="background-color: blue">Front</div>
    <div class="back" style="background-color: red">Back</div>
  </div>
</div>

What I need is the <div class="test"> to be displayed in front of all. Like this. But I don't want to set the z-index on the square divs, because they will be placed inside a flex layout Grid.

Is there a way to say to an element to be always rendered in front of all other? No mathers where is he placed or what is happening to the stack context.

htmlcsscss-transforms


Solution 1:[1]

I took a different approach. i removed the animation class after the animation finished. I think it is a simpler solution (and I also wasted hours trying to figure out what was going on...)

Solution 2:[2]

All I did was moving the div with class .test outside the div with the flipping element.

.square {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

.square>* {
  position: absolute;
  width: 100%;
  height: 100%;
}


/* flip */


/* u -> uncontroled / c -> controled */

.flip {
  perspective: 200em;
}

.flip .front,
.flip .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@supports (-webkit-transform-style: preserve-3d) or (-moz-transform-style: preserve-3d) or (transform-style: preserve-3d) {
  .flip .front,
  .flip .back {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: 1s;
  }
}


/* -> horizontal */

.flip .front {
  z-index: 2;
  transform: rotateY(0deg);
  perspective: none;
}

.flip .back {
  transform: rotateY(-180deg);
}

.flip.u:hover .back,
.flip.c.active .back {
  transform: rotateY(0deg);
}

.flip.u:hover .front,
.flip.c.active .front {
  transform: rotateY(180deg);
}


/* -> vertical */

.flip.vertical .back {
  transform: rotateX(-180deg);
}

.flip.vertical.u:hover .back,
.flip.vertical.c.active .back {
  transform: rotateX(0deg);
}

.flip.vertical.u:hover .front,
.flip.vertical.c.active .front {
  transform: rotateX(180deg);
}

.test {
  position: absolute;
  top: 30%;
  left: 3%;
  background-color: green;
  height: 100px;
  width: 10px;
  z-index: 10;
}
<div style="width: 100px; background-color: black">
  <div class="square flip u">
    <div class="front" style="background-color: blue">
      Front

    </div>
    <div class="back" style="background-color: red">Back</div>
  </div>
  <div class="test"></div>
  <hr>
  <div class="square flip u">
    <div class="front" style="background-color: blue">Front</div>
    <div class="back" style="background-color: red">Back</div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Esteban
Solution 2 Gerard

Related Questions