首页 > 代码库 > div覆盖div DIV相互重叠如何解决

div覆盖div DIV相互重叠如何解决

2024-07-23 22:52:36   217人阅读

  div覆盖div,出现div与div盒子之间产生重叠覆盖现象，而内容没有出现覆盖重叠现象原因与解决方法。DIVCSS5通过CSS图文案例介绍产生原因与解决方法。DIV与DIV覆盖原因与解决方法。    可能您遇到过上下结构的布局，下面DIV内容重叠上面DIV内容上，也可能下面内容覆盖掉上面DIV布局，形成DIV与DIV覆盖重叠现象；您也可能遇到过相邻的两个DIV盒子发生重叠覆盖现象，这些是什么问题如何解决？    接下来DIVCSS5通过案例来演示这两种兼容性DIV覆盖重叠现象问题，并解释原因与解决方法。一、上下结构DIV盒子覆盖1、首先网站DIV CSS实例HTML代码<!DOCTYPE html><html><head><title>DIVCSS5实例 DIV与DIV覆盖</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>.boxa,.boxb{ margin:0 auto; width:400px;}.boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}.boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}.boxb{ border:1px solid #000; height:40px; background:#999}</style></head><body><div class="boxa"><div class="boxa-l">内容左</div><div class="boxa-r">内容右</div></div><div class="boxb">boxb盒子里的内容</div></body></html>可拷贝代码自己动手发现DIV覆盖现象。实例代码说明：设置两个大div盒子分别CSS命名为“.boxa”和“.boxb”，设置宽度相同均为400px,对“.boxb”设置一个黑色边框与高为40px、背景为黑色的；然后在boxa里添加两个一个靠左一个靠右CSS命名分别为“.boxa-l”“.boxa-r”，两个小盒子，同时设置红色边框、css高为80px、宽度分别为280px和100px。2、问题分析一般想需要将“.boxa”和“.boxb”布局是上下结构，从上图发现在浏览器中看到效果是两个盒子里内容是实现上下结构效果，但“.boxb”这个DIV跑到“.boxa”下面去了，但内容没有发生覆盖，只有DIV发生覆盖现象。这个原因是因为第一个大盒子里的子级使用了浮动float属性而产生了浮动，所以导致“.boxa”没有被撑开，而同级的“.boxb”盒子与“.boxa”紧贴，而“.boxa”高度没有，“.boxa”的子级浮动的与“.boxb”不是同级，“.boxb”盒子依然认为“.boxa”没有高度，所以导致“.boxb”DIV盒子就跑到“.boxa”子级DIV盒子下面形成了覆盖重叠现象。3、问题解决方法要么清除浮动，要么设置“.boxa”高度，一般情况下文字内容不确定多少 就不能设置固定的高度，所以一般不能设置“.boxa”高度(当然能确定内容多高，这种情况下“.boxa”是可以设置一个高度即可解决覆盖问题。)。这里就使用CSS清除浮动方法解决上下结构DIV重叠覆盖问题，清除浮动有两种方法，方法如下。3-1：css clear清除浮动在“.boxa”盒子</div>闭合前加clear样式清除浮动。完整HTML源代码： <!DOCTYPE html><html><head><title>DIVCSS5实例 DIV与DIV覆盖</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>.boxa,.boxb{ margin:0 auto; width:400px;}.boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}.boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}.boxb{ border:1px solid #000; height:40px; background:#999}.clear{ clear:both}</style></head><body><div class="boxa"><div class="boxa-l">内容左</div><div class="boxa-r">内容右</div><div class="clear"></div></div><div class="boxb">boxb盒子里的内容</div></body></html>3-2：css overflow清除浮动此方法与上一方法更为简便简单，只需对“.boxa”（子级有浮动的父级盒子加overflow:hidden）CSS DIV实例代码如下：<!DOCTYPE html><html><head><title>潜水曝气机</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>.boxa{ overflow:hidden}.boxa,.boxb{ margin:0 auto; width:400px;}.boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00}.boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00}.boxb{ border:1px solid #000; height:40px; background:#999}</style></head><body><div class="boxa"><div class="boxa-l">内容左</div><div class="boxa-r">内容右</div></div><div class="boxb">boxb盒子里的内容</div></body></html>

 

div覆盖div DIV相互重叠如何解决


联系
我们