title: div overflow and z-index
body: <p><strong>Please have a look at the following fiddle:</strong></p>
  
  <p><strong><a href="https://jsfiddle.net/y7w705wb/20/" rel="nofollow noreferrer">https://jsfiddle.net/y7w705wb/20/</a></strong></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>.row {
      height: 25px;
       width: 300px;
       background-color: red;
       overflow: visible;
       border: 1px solid black;
       position: absolute;
  }
   .modal {
      width: 200px;
       height: 100px;
       background-color: yellow;
       z-index: 10;
       position: absolute;
       left: 3px;
       top: 3px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="row" style="transform: translateY(0px);"&gt;
          Content
          &lt;div class="modal"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row" style="transform: translateY(25px);"&gt;
          Content
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The second div row overlaps the yellow "modal popup" I created in the first row. I am trying to let the yellow box overlap the second row. How can I archive that?
  My prerequisites are, that I have a bunch of rows, but in some of them I want to display a small popup window, that contains information. 
  This information should not be overlapped by subsequent rows. </p>
  
  <p><strong>This is only a very basic example to show my core problem.
  Any ideas?</strong></p>
  
  <blockquote>
    <p>Update:</p>
  </blockquote>
  
  <p><strong>I updated my fiddle:</strong></p>
  
  <p><strong><a href="https://jsfiddle.net/y7w705wb/20/" rel="nofollow noreferrer">https://jsfiddle.net/y7w705wb/20/</a></strong></p>
  
  <p><code>The reason why I ask this question is, because I am using ag-grid as datatable in my app and want to display a modal inside one of the cells.
  I cannot change the cell structure, so I really have to do it like in my fiddle example.</code></p>