HTML5开发-如何实现两个div的重叠

html-css011

HTML5开发-如何实现两个div的重叠,第1张

在很多情况下都需要实现两个div的重叠（包含层级关系），实现的方法也和div中属性设置的不同也是不一样的，尤其是 position 和 display 的变化. 但是总体上就是对margin（ 盒模型 ）和top（ 定位 ）等的运用。margin是属于盒模型中的一部分，修改了margin，就是修改了div元素的大小，但是修改了定位，只是修改了 自己本身的位置 ，不修改元素占用的大小，也不会干扰其他元素的位置。 1. 但是依靠margin来重叠有很大的 局限性 ，图片如下： 这是设置了 黄色div块的margin-top 才实现的，你也可以设置 蓝色div的margin-bottom。 如果你设置黄色div的margin-bottom就不能实现重叠的效果。 2. 当两个div的position为 relative 时，可以同时使用盒模型和定位来实现重叠。使用定位来选择位置时，优先级为top>bottom，left>right，优先级高的会屏蔽低的。 3. 当两个div的position为 absolute 时，那么父元素必须设置一个 定位 属性（不能为默认的static），这样子div才能相对于父div布局。

大概css设置步骤如下：

1、将所有div设置定位属性position，如在内嵌样式style标签内写：

div { position : absolute}

2、为每个div单独设置位置层属性z-index与外边距属性margin，比如将红色、黄色、蓝色div分别添加class名为div1、div2、div3，则在内嵌样式style标签内写：

.div1 { z-index : 1margin : 10px}

.div2 { z-index : 2margin : 30px}

.div3 { z-index : 3margin : 50px}

说到这应该可以了。

重叠在一起需要改变默认的布局方式，将其中一个显示在上层需要设置深度顺序，这两点分别用如下样式完成

position: absolute /*设置为绝对定位*/

z-index:999        /*设置重叠的上下次序，值越大月在上方*/

示例如下

创建Html元素

<div class="top">

<div class="b">我是绝对定位，并且重叠在上方</div>

<div class="a">我是默认定位</div>

</div>

设置css样式

div.top{margin:50pxpadding:20pxwidth:200pxheight:200pxborder:2px dashed #ebbcbe}

div.top div{width:100pxheight:100pxpadding:10pxcolor:white}

div.a{background:red}

div.b{background:greenposition:absolutetop:100pxleft:100pxz-index:999}

观察显示效果