现创建如下布局,其中灰色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; }
时间: 2024-10-07 05:30:14