DIV布局網頁的第三種方式：覆蓋。DIV覆蓋方式經常應用於網頁彈出框的制作，例如在網店系統中，當用戶沒有登錄時，點擊購買，系統彈出一個登陸框。
請看代碼：
HTML部分：
XML/HTML Code
復制內容到剪貼板
- <body topmargin="0">
- <div class="main">
- 網頁主體內容，包含網頁其他欄目
- </div>
- <!--蒙板-->
- <div class="mask"></div>
- <div class="opendiv" >
- 最上層DIV覆蓋下面的全部DIV
- </div>
- </body>
這里，網頁主體信息放在main這個樣式所在的DIV塊內，我們添加一個蒙版，當彈出一個div時，不允許用戶進行其他操作。
CSS部分：
CSS Code
復制內容到剪貼板
- .main { width:960px; height:800px; background-color:#FF9966; margin:0px auto;}
- .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; }
- .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的控制，就變成了一個彈出式登陸框了哦。