Absolutely positioned boxes show outside their parent container styled with overflow:hidden

overflow:hidden and absolutely positioned elements

Markup

<div id="wrapper">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
<div class="box3">box 3</div>
<div class="box4">box 4</div>
</div>

If this wrapper was positioned (any value other than static), then it would become the positioning block and the four nested boxes would position themselves in relation to its layout. They would also be clipped outside of the positioning block boundaries.

CSS

#wrapper {
overflow:hidden;
zoom:1;
}
.box1,
.box2,
.box3,
.box4 {
position:absolute;
background:#fff;
}
.box1 {left:0;top:0;}
.box2 {right:0;top:0;}
.box3 {left:0;bottom:0;}
.box4 {right:0;bottom:0;}