Layout-Absolute, relative, left floating layout, and Cascade

Now create the following layout, where the gray div contains pink and green two div, pink and green stacked, and three icons floating.

1. Div code

<!--box for Total container (gray), relative layout, contains Box1 (pink) and Box2 (green) two Div -<Divclass= "box">    <!--Box1 (Pink) is the second level container, absolute layout, box1 inside to have three left floating element pic1,pic2,pic3, can add a relative layout div box1_1 (yellow) -<Divclass= "Box1">    <!--box1_1 (yellow) for relative layout -    <Divclass= "Box1_1">        <Divclass= "Pic1"></Div>        <Divclass= "Pic2"></Div>        <Divclass= "PIC3"></Div>    </Div>    </Div>    <!--Box2 (green) for second level container, absolute layout -<Divclass= "Box2"></Div></Div>

2. Let the pink and green div cascade, using the absolute layout and z-index. The Z-index values are stacked on top, box2 z-index large, then green stacked above.

The absolute layout can be set with Top,left, right, bottom property, which is the distance from the parent Div, such as box2 above the box 480px, just to overlap with the box1.

. Box{width:600px;Height:600px;background:#535353; }. Box1{width:500px;Height:450px;position:Absolute;Z-index:Ten;background:Pink;Top:50px; Left:50px; }. Box2{width:50px;Height:50px;position:Absolute;Z-index: -;Top:480px; Left:250px;background:Green; }

3. The sub-div within the absolute layout div1 can be a relative layout, such as Div1_1. And to make the picture left floating Float:left, its parent div must be relative to the layout. Thus, you can add a relative layout div when you need to make a floating arrangement within an absolute layout div.

. Box1_1{width:300px;Height:200px;position:relative;margin:0 Auto;background:Yellow;Padding-top:80px;Padding-left:30px; }. Pic1{float: Left;width:80px;Height:40px;background:URL (images/pr_like.png) no-repeat; }. Pic2{float: Left;width:80px;Height:40px;background:URL (images/pr_bfcase.png) no-repeat; }. PIC3{float: Left;width:80px;Height:40px;background:URL (images/pr_tag.png) no-repeat; }

Layout-Absolute, relative, left floating layout, and Cascade