HTML - overflow and position absolute issue

Question

I have a child with margin-top. In order to apply the margin-top correctly I need an overflow auto for the parent. Unfortunately this overflow auto would cut off overlapping children that had been positioned absolute. Is there a work around?

js Fiddle

HTML

<div class="a"> </div>
<div class="b">
   <div class="overlap" ></div>
   <p>
    Lorem Ipsum, arula jkasds 
   </p>
</div>

CSS

.a {  
  position: relative;
  width: 100%;
  background-color: #005a73;
  height: 100px;
  overflow: auto;
}

.overlap {
  width: 50px;
  height: 80px;
  position: absolute;
  background: yellow;
  top: -60px;
  left: 20px;
}

.b {
  /*overflow: auto; */
  position: relative;
  width: 100%;
  height: 840px;
  background-color: #f7f7f7; 
}

p {
  margin-top: 50px;
}

Answer 1

Here is how you might solve the problem.

Wrap your regular content in a separate div (.wrap) and specify overflow: auto on it.

That way, you can still adjust the absolutely positioned element as you want and get the overflow/scroll effect that you need.

See prototype below.

.a {
  position: relative;
  width: 100%;
  background-color: #005a73;
  height: 100px;
}
.overlap {
  width: 50px;
  height: 80px;
  position: absolute;
  background: yellow;
  top: -30px;
  left: 20px;
}
.b {
  position: relative;
}
.b .wrap {
  overflow: auto;
  width: 100%;
  height: 100px;
  background-color: tan;
}
p {
  margin-top: 10px;
}

<div class="a"></div>
<div class="b">
  <div class="overlap"></div>
  <div class="wrap">
    <p>Lorem Ipsum, arula jkasds</p>
    <p>Lorem Ipsum, arula jkasds</p>
    <p>Lorem Ipsum, arula jkasds</p>
    <p>Lorem Ipsum, arula jkasds</p>
    <p>Lorem Ipsum, arula jkasds</p>
    <p>Lorem Ipsum, arula jkasds</p>
  </div>
</div>