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

现创建如下布局,其中灰色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

布局——绝对、相对、左浮动布局和层叠的相关文章

左边logo 右边广告图片布局 div css左右浮动布局实例

左边logo 右边广告图片布局(div css左右浮动布局实例) 一般网页头部是左边网站标志logo,右边为广告图片或电话号码图片,这里DIVCSS5为大家介绍对float浮动使用实例布局介绍. 需要div+css布局案例效果图需要div+css布局案例效果图(缩小)一.DIVCSS5实例布局技术点说明 - TOP 1.图片切出说明:首先切好左边logo图片,右边广告图片(切图注意不影响图片质量情况尽量宽度高度尺寸切小).2.采用float:left和float:right布局:一般遇到内容靠左

拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭

一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差不多有一年之久了.文章最后留下了“浮动布局更好的替代方案是什么?”后文再介绍的预告. 由于自己肚子中的货物不足以撑起一篇足够质量的文章,所以关于“浮动布局更好的替代方案是什么?”的文章一直并未动笔.好在事物总是在发展的,我也是每天都是在进步,对于列表布局的思考也愈发成熟.加上正好前不久又有人询问我“

IOS自动布局中的浮动布局(6)----MyFloatLayout横空出世

前言 在MyLayout的6大布局中,每种布局都有不同的应用场景.且每种布局的子视图的约束机制不一样:线性布局MyLinearLayout.表格布局MyTableLayout.流式布局MyFlowLayout.浮动布局MyFloatLayout这四种布局的子视图之间的约束是通过添加到父布局的先后顺序来决定的:框架布局MyFrameLayout中的子视图则只跟父布局视图有关,而跟添加的先后顺序无关:相对布局中MyRelativeLayout的子视图则是通过设置视图之间的依赖关系来建立约束的,而跟添

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

浮动布局所带来的影响以及如何清除浮动

在页面的布局过程中浮动是个好东西,我们经常会用到浮动布局,它可以使元素共享一行,极大的方便了我们的布局过程.但是很多人可能只是会用,对浮动的原理只是一知半解,如果没有清晰的认识到浮动所带来的影响以及如何清除浮动所带来的影响,那么面对代码量庞大的页面将会变得一头雾水.所以接下来我们来深入学习一下浮动布局,相信大家把浮动这个概念掌握的很清晰的时候,以后运用起来将会更加得心应手. 一. 什么是浮动布局? CSS 的 Float(浮动),会使元素向左或向右移动,使元素共享一行,类似于给元素加了inlin

float浮动布局的应用

一个浮动(左浮动或右浮动) 垂直环绕布局(浮动和清除浮动) 左右两列布局 注意:网页设计中应该尽量避免使用浮动 1.一个浮动(左浮动或右浮动) 当一个div里面含有浮动元素和非浮动元素,IE6,7中的浮动元素会出现错位现象. 解决方案:  ①将浮动元素位于非浮动元素的前面.②非浮动设置为浮动元素.③浮动元素设置margin-top的负值. <div class="title"><span>新闻列表</span><a href="jav

CSS页面布局基础3——元素浮动

1.浮动(float)是基于CSS的现代Web设计用到的主要功能之一,可以用它来创建多累的网页布局,从无序列表创建导航工具条,不是用table而创建类似表格的对其方式等. 为使元素浮动到左边或者右边,并使后面的文本环绕它,可使用float属性,float属性的取值是:none(不浮动),left(向左浮动),right(向右浮动). 使用float属性后,浮动的元素从正常文档流中脱离出来,同时对布局中的其他元素造成一定的影响. 浮动可以应用于任何元素. 我个人认为我们可以这样理解浮动(如有什么不

CSS浮动布局与菜单栏设计

公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局 浮动存在问题:浮动使元素脱离文档流,导致下面的元素向上提.  布局存在问题:由于浮动元素宽度已设定,根据盒模型,对于有宽度的盒子添加padding border和magin导致盒子变大,从而挤出后面浮动元素,导致下移,称作"浮动移滑". 围住浮动元素的三种方法: 1为父元素添加 overflow:hidden   强制包

11_浮动布局.txt

CSS布局有三种方式: 1.默认文档流方式:以默认的HTML元素的结构顺序显示 2.浮动布局方式:通过设置HTML元素的float属性显示 3.定位布局方式:通过设置HTML元素的position属性显示 ---------------- 浮动布局 什么是浮动? 浮动是CSS实现布局的一种方式,包括div在内的任何元素都可以以浮动的方式进行显示. float:none/left/right none:不浮动 left:对象向左浮动,而后面的内容流向对象的右侧 right:对象向右浮动,而后面的内