title: Relative position and overflow auto
body: <p>I have a problem with overflow: auto and position relative? Example of my code is:</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>div {
    border: 3px dashed #ccc;
    padding: 20px;
  }
  
  div::before { content: attr(class); }
  
  .grandparent { overflow: auto; }
  .parent { position: relative; }
  .child { position: absolute; height: 60px; background: black; color: white; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grandparent"&gt;
    &lt;div class="parent"&gt;
      &lt;div class="child"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I want the <code>div.child</code> go over <code>div.grandparent</code> but because of <code>div.parent</code> and his <code>position: relative</code> that causes overflowing.</p>
  <p>Please note that I need to absolutely position elements inside <code>.parent</code> - the position being relative to <code>.parent</code> - (which is why I need <code>position: relative</code> here), and I also need a scrollable <code>.grandparent</code>.</p>
  <p>Expected result:</p>
  <p><a href="https://i.stack.imgur.com/Yxh1L.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Yxh1L.png" alt="enter image description here" /></a></p>