title: How to control z-index when using perspective and transform?
body: <p>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).</p>
  
  <p>As you can see on the image, the select menu is being covered by the card below.</p>
  
  <p><a href="https://i.stack.imgur.com/IgSiN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IgSiN.png" alt="Image of the problem on the real page"></a></p>
  
  <p>Here is a snippet with a reproduction of the issue:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.square { position: relative; width: 100%; padding-bottom: 100%; }
  .square&gt;* { position: absolute; width: 100%; height: 100%; }
  
  /* flip */
  /* u -&gt; uncontroled / c -&gt; 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;
   }
  }
  /* -&gt; 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); }
  /* -&gt; 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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="width: 100px; background-color: black"&gt;
    &lt;div class="square flip u"&gt;
      &lt;div class="front" style="background-color: blue"&gt;
        Front
        &lt;div class="test"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="back" style="background-color: red"&gt;Back&lt;/div&gt;
    &lt;/div&gt;
    &lt;hr &gt;
    &lt;div class="square flip u"&gt;
      &lt;div class="front" style="background-color: blue"&gt;Front&lt;/div&gt;
      &lt;div class="back" style="background-color: red"&gt;Back&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I need is the <code>&lt;div class="test"&gt;</code> to be displayed in front of all. Like <a href="https://codepen.io/arracso/pen/yogdyV" rel="nofollow noreferrer">this</a>. But I don't want to set the z-index on the square divs, because they will be placed inside a flex layout Grid.</p>
  
  <p>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.</p>