Absolute Positioned Elements Overlap Their Overflow Hidden Parent

Sometimes that happens, when we use absolute position to a child element then it will goes outside of Parent element. To avoid this problem there is a simple solution for it.

Just apply position:relative css to a parent div or element and assign a position:absolute to a child div or element then it will never overlap outside of parent div. Also apply overflow:hidden css to a parent div or element.

If you are trying to a solve this issue then you have to easy solve this issue. Position:relative is must important to apply for parent div.

For example:

Let me show you how it works:

HTML


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

CSS


.parent {
  position:relative;
  overflow:hidden;
  margin:0 auto; height:100px; 
  box-shadow:inset 0px 0px 12px #555; background-color:white;
}
.child {
  position:absolute; top:-10px; left:-5px;
  width:30px; height:30px;
  background-color:rgba(30,110,190,.8);
}