overflow:hidden and absolutely positioned elementsMarkup<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;}
|
|
|
