html怎么让两个div重叠,css怎么让几个div不重叠

css div不堆叠层叠重复遮挡缘由与筹划门径之css怎样让几个div不堆叠,div不堆叠，div与div之间不遮挡题目原由，打点方法规划思路图文教程篇。CSS5通过三种办法设计怎么让div不遮挡不重叠。

一、同级DIV有的是用float有的不有应用构成DIV重叠

赤色DIV与灰色后盾DIV重叠体现

咱们看看代码

重叠DIV

.left{width:200px; float:left; color:#F00; border:1px solid #F00}

.nofloat{width:100px; bac千克round:#CCC}

left对象DIV内

nofloat对象DIV内

成就截图

两个div重叠遮挡显露

二、缘由分析：

class=left的div盒子运用了浮动属性float:left，而class=nofloat未使用。如许一个浮动DIV，一个未运用float浮动属性，以是就造成重叠征象。

三、企图方法：

1、两个均应用float浮动属性

对.left和.nofloat设置装备摆设float属性，方案遮挡层叠。(扩张阅读 div并排不换行表现)

同级div凡是有float何等就可不堆叠排版

2、两个都不使用浮动属性。

两个div都不配置float浮动，用意堆叠标题。

两个div不重叠

3、第一个div设置装备摆设float，第二个div设置margin属性行使间距让其不重叠

这类法子也是布局常用的，前提是带float要设置装备摆设宽度，同时不带float的div设置装备摆设margin属性，操纵间距方法，让没有设置float的div错开设置装备摆设float，完成div不重叠。

哄骗flaot浮动与margin间距完成div重叠遮挡

四、总结

以上是经由过程两个div重叠，从解析、治理门径、图文用意等方式CSS5先容让div不堆叠门径。要是更多几个div涌现以上堆叠问题，同理使用以上方式教程同样迅速规画。