布局——绝对、相对、左浮动布局和层叠

现创建如下布局,其中灰色div包含粉色和绿色两个div， 粉色和绿色层叠； 三个图标浮动排列。

 1. div 代码

<!--box为总容器（灰色），相对布局，内包含box1（粉色）和box2（绿色）两个div-->
<div class="box">
    <!--box1 （粉色）为第二级容器,绝对布局，box1内要有三个左浮动的元素pic1,pic2,pic3,可添加一个相对布局div box1_1（黄色）-->
<div class="box1">
    <!--box1_1（黄色）为相对布局-->
    <div class="box1_1">
        <div class="pic1"></div>
        <div class="pic2"></div>
        <div class="pic3"></div>
    </div>
    

</div>
    <!--box2 （绿色）为第二级容器，绝对布局-->
<div class="box2">

</div>
</div>

2. 让粉色和绿色div 层叠，使用绝对布局和z-index,。z-index数值大的叠在上面，box2 的z-index 大，则绿色叠上面.

绝对布局可以用top,left, right, bottom 属性设置边距，该边距是相对于父div 的距离，如box2上边距离box 480px, 刚好能与box1 重叠一部分。

    .box{
            width: 600px;
            height: 600px;
            background: #535353;
        }
        .box1{
            width: 500px;
            height: 450px;
            position: absolute;
            z-index: 10;
            background: pink;
            top: 50px;
            left: 50px;

        }
        .box2{
            width: 50px;
            height: 50px;
            position: absolute;
            z-index: 20;
            top: 480px;
            left: 250px;
            background: green;
        }

 

 

3. 绝对布局div1 内的子div 可以是相对布局，如div1_1。并且要让图片左浮动排列float:left，其父div 必须是相对布局。因而当需要在绝对布局的div内进行浮动排列时，可以增加一个相对布局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;
        }