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: