title: Z-Index issue with child elements
body: <p>I have sibling divs in a page, let's call them parents. And these parents have one child divs each. You can think of these child divs as custom tooltips. By default, child divs are hidden. When I hover one of the parents, it's child div becomes visible.</p>
  <p>Because of painting order, when I hover first parent, it's child becomes visible below second parent which painted last on the page. All parents have the same z-index which is 1, as well as all child divs have the same z-index which is 2.</p>
  <p>All child divs needs to be drawn on top. How can I override it to work like this?</p>
  <p>You can find my problem as reproducible below:
  <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>.parent{
      position: relative; height: 200px; width: 200px; z-index: 1; display: inline-block;
  }
  .parent:hover .child{
      display: block;
  }
  .child{
      position: absolute; height: 50px; width: 50px; z-index: 2; display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="parent" style="background-color: hotpink;"&gt;Parent 1&lt;div class="child" style="background-color: yellow; margin-left: 180px; margin-top: 50px;"&gt;Child 1.1&lt;/div&gt;&lt;/div&gt;
   &lt;div class="parent" style="background-color: green;"&gt;Parent 2&lt;div class="child" style="background-color: greenyellow; margin-left: -30px;"&gt;Child 2.1&lt;/div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>