Absolute position and Overflow:hidden

Answer 1

I believe, every front-end developer encountered this situation, at least once. Let's say you need to absolute position something… And then you try to move it in some direction, and boom it disappears… You forgot the parent was set to overflow:hidden and now your element is lost in the hidden infinite vacuum.There is a css trick to do this.Please find the below demo example for it...

  
P
    
child
  

css code:


.grand-parent {
  width:50px;
  height:50px;
  position:relative;
  background-color: grey;
}
.parent {
  width:10px;
  height:30px;
  overflow:hidden;
  background-color: blue;
}
.child {
  position:absolute; 
  width:50px;
  height:20px;
  background-color: red;
  top:-10px; 
  left:5px;
}