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

在很多情况下都需要实现两个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布局。

多个img叠加用css样式控制即可：

如果是背景的话，background 属性可以指定多个图片。

示例如下：

background: url("haoroomsCSS1_s.jpg") 0 0 no-repeat,

url("haoroomsCSS2_s.jpg") 200px 0 no-repeat

就同时指定了两个图片，两个图片的位置可以通过后面的 位置参数调整。

如果是img元素，可以通过给img指定绝对定位的样式，通过绝对定位让两个img按照

要求的方式重叠。

比如：

img#id1 {position:absolutetop:0left:0width:100%display:block}

mg#id2 {position:absolutetop:20pxleft:0width:100%display:block}

如果要使用绝对定位，img的父元素的样式需要加上 position:relative

如果B不想用背景图，那么就把他们两个放到一个容器中（box），然后给这个容器（box，也就是A和B的父元素）设置 position:relative属性

然后A和B都设置position:absolute属性

再给他们分别设置z-index属性，z-index:数字，数字越大越在上面

希望能帮到你

---