#StackBounty: #css #position #overflow Relative position and overflow auto

Bounty: 100

I have a problem with overflow: auto and position relative? Example of my code is:

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; }

<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

I want the div.child go over div.grandparent but because of div.parent and his position: relative that causes overflowing.

Please note that I need to absolutely position elements inside .parent – the position being relative to .parent – (which is why I need position: relative here), and I also need a scrollable .grandparent.

Expected result:

Get this bounty!!!