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

一、首先是一个盒子的垂直水平居中：

*{

margin:0

padding: 0

box-sizing: border-box

}

.parent{

border:1px solid red

width:100%

height: 300px

font-size: 16px

text-align: center

}

.box{

border: 1px solid black

display: inline

padding-left:100px

padding-bottom:80px

line-height: 220px

}

这里设置了display:inline出现了几个问题：

1.长宽高不能设置了，margin-top/bottom不能设置

解决办法：将盒子设置会border-box,用padding来撑开

2.元素的高度是跟随这当前元素的font-size来变化的

解决办法：每个元素设置一个font-size(这样有一点冗余)

3.line-height：父元素的高度这样设置会出现偏移

解决办法：line-height的值 = 父元素的高度 - padding-bottom的值

一个盒子居中了，那么两个怎么弄呢，并且他们相隔的距离要一样的

1.一开始我的思路使用margin-left:百分比的方法，但是他这百分比不会随着父元素的大小变化而变化。

2.然后我换了一种思路：用rem来动态设置距离的值

首先通过JS代码设置根元素的font-size大小

然后再设置盒子的margin-left的值

JS代码：

var rootSize = document.querySelector("body").clientWidth / 7.5

document.querySelector("html").style.fontSize = rootSize + "px"

css代码：

.parent{

border:1px solid red

width:100%

height: 300px

font-size: 16px

}

.box{

font-size: 16px

border: 1px solid black

display: inline

padding-left:100px

padding-bottom:80px

margin-left: 2rem

line-height: 220px

}

只要根据盒子的数量来调整margin-left的大小就可以了。

这里设置了根元素html的font-size值后出现了一个问题：就是

原因：因为这些值是根据当前元素的font-size来设置的，所以只要把父元素的font-size设置为浏览器的默认值就可以了。

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

---