本文向大家描述一下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，適合層多的時候用。
 

【編輯推薦】

1. 學習筆記 剖析CSS縮寫六大規則
2. CSS樣式表特點及嵌入網頁的四種途徑
3. 三種方法實現CSS樣式表插入
4. CSS外邊距設置屬性margin用法
5. 探究CSS高級語法中選擇器分組和CSS繼承用法