Firefox浏览器里DIV重叠问题解决-浏览器网页显示重叠

本文向大家描述一下Firefox浏览器里DIV重叠（高度问题）的解决办法，用DIV+CSS布局的页面在IE浏览器中显示得好好的，可是一到Firefox浏览器中就出现布局DIV层重叠的现象，主要是因为Firefox和IE在处理层方面有一些细微的差别，请看本文具体解决方法。

Firefox浏览器里DIV重叠（高度问题）的解决办法

用DIV+CSS布局的页面在IE浏览器中显示得好好的，可是一到Firefox浏览器中就出现布局DIV层重叠的现象，主要是因为Firefox和IE在处理层方面有一些细微的差别。通过我制作页面的经验，为大家提出一个常见的解决办法。

<styletypestyletype="text/CSS"> 
#top{  
float:left;  
margin:4px;  
}  
#foot{  
border:1pxsolidrgb(192,192,192);  
margin:0pxauto;  
}  
.clear{  
clear:both;  
}  
</style> 
<dividdivid="top">此处为第一个层的内容</div> 
此处为文章的具体内容。  
<divclassdivclass="clear"></div> 
<dividdivid="foot">此处为第二个层的内容</div>

以上代码中红色部分即为解决div层重叠的方法，即在两个层中间加一个空白层，清除该层两边的浮动，使得上面的层与下面的层不在同一行。

在hbcms的CSS框架下，可以直接用<divclass="clear"></div>

clear:both;/*该行的目的就是增加了一个空白层，清除该层两边的浮动使得上面的层与下面的脚注层不在同一行*/

CSS让两个div重叠做网页的时候在div里放了一个别的网页的天气插件，但是点击了会跳到广告页面的，想去网上找个禁止div点击的方法，可是发现没有，用了js的方法好像也没有成功，后来觉得还是用两个层重叠的方法来阻止点击，虽然定位是有点麻烦。

<divstyledivstyle="position:relative"> 
<divstyledivstyle="position:absolute;left:0;top:0"></div> 
<divstyledivstyle="position:absolute;left:0;top:0"></div> 
</div>

relative是相对定位的意思。absolute是绝对定位，很奇妙少了一个都不行，但是放在一起就可以实现一个div中两个div重叠在一起。

z-index:1这个是决定两个层在一起的显示顺序，z-index的默认值是0，适合层多的时候用。

【编辑推荐】