css div不堆叠层叠重复遮挡缘由与筹划门径之css怎样让几个div不堆叠,div不堆叠，div与div之间不遮挡题目原由，打点方法规划思路图文教程篇。CSS5通过三种办法设计怎么让div不遮挡不重叠。
一、同级DIV有的是用float有的不有应用构成DIV重叠
赤色DIV与灰色后盾DIV重叠体现
咱们看看代码
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>重叠DIV</title>
<style>
.left{width:200px; float:left; color:#F00; border:1px solid #F00}
.nofloat{width:100px; bac千克round:#CCC}
</style>
</head>
<body>
<div class="left">left对象DIV内</div>
<div class="nofloat">nofloat对象DIV内</div>
</body>
</html>
成就截图
两个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涌现以上堆叠问题，同理使用以上方式教程同样迅速规画。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/jiqiao/j52074.shtml
