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布局。

由于你给他设定了宽度值，然后应该也给了高度值height和行高line-height，这个是由于宽度限定导致内容自动换行，然后又给了高度和行高，只需要将高度样式height或者行高line-height删掉就行了还有一个方法就是直接加大宽度让内容在一行显示，亲测，望采纳 谢谢

1、首先打开网页制作应用程序后，通过打开现有编辑区内容进行说明。

2、然后在菜单栏选择查看，其中点击放大和缩小对编辑区进行页面缩放。

3、通过使用快捷命令ctrl+=放大编辑区页面。

4、然后通过使用快捷命令ctrl+-缩小编辑区页面。

5、或者在菜单栏中点击查看>缩放比率选择百分比来放大缩小编辑区。

---