css - HTML - overflow and position absolute issue -

i have child margin-top. in order apply margin-top correctly need overflow auto parent. unfortunately overflow auto cut off overlapping children had been positioned absolute. there 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; } 

here how might solve problem.

wrap regular content in separate div (.wrap) , specify overflow: auto on it.

that way, can still adjust absolutely positioned element want , overflow/scroll effect 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>