Position absolute and overflow hidden

Question

Make outer <div> to position: relative and inner <div> to position: absolute. It should work for you.

What about position: relative for the outer div? In the example that hides the inner one. It also won't move it in its layout since you don't specify a top or left.

An absolutely positioned element is actually positioned regarding a relative parent, or the nearest found relative parent. So the element with overflow: hidden should be between relative and absolute positioned elements:

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

Make sure.

1. parent position relative.
2. parent have manually assigned width and height(important as child element having absolute position).
3. child position absolute;

.outer{
   position:relative;
   width:200px; 
   height:100px;
   overflow:hidden;
}

.inner{
   position:absolute;
   width:100px;
   height:100px;
   font-size:3rem;
}

<div class="outer">
<div class=inner>
Inner DIV to apply overflw hidden
</div>
</div>

}