DIV布局之道三：DIV塊的覆蓋，DIV層遮蓋其他DIV

DIV布局網頁的第三種方式：覆蓋。DIV覆蓋方式經常應用于網頁彈出框的制作，例如在網店系統中，當用戶沒有登錄時，點擊購買，系統彈出一個登陸框。

請看代碼：

HTML部分：

1. <bodytopmargin="0">
3. <divclass="main">
4. 網頁主體內容，包含網頁其他欄目
5. </div>
6. <!--蒙板-->
7. <divclass="mask"></div>
8. <divclass="opendiv">
9. 最上層DIV覆蓋下面的全部DIV
10. </div>
11. </body>

這里，網頁主體信息放在main這個樣式所在的DIV塊內，我們添加一個蒙版，當彈出一個div時，不允許用戶進行其他操作。

CSS部分：

1. .main{width:960px;height:800px;background-color:#FF9966;margin:0pxauto;}
2. .mask{z-index:900;position:fixed!important;position:absolute;left:0px;top:0px;width:100%;height:100%;background:#000;filter:alpha(opacity=45);opacity:0.45;-moz-opacity:0.45;-khtml-opacity:0.45;}
3. .opendiv{z-index:920;position:absolute;left:50%;top:50%;margin-left:-175px;margin-top:-125px;width:334px;height:180px;background-color:#6699FF;text-align:center;padding-top:20px;}

這里的樣式用到了CSS濾鏡寫法，z-index屬性用來指定當前DIV所處的高度（即Z軸的值），預覽效果圖如下：

我們可以看到，中間藍色背景的DIV塊是網頁中最上面的一個DIV塊，覆蓋了其他的DIV，當其他DIV塊被覆蓋后，不允許用戶點擊被覆蓋的內容，實現了約束用戶的操作的目的。訪客可以自己練習一下這個例子。當我們在中間藍色背景的DIV中放置登陸框的時候，結合JS的控制，就變成了一個彈出式登陸框了哦。