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的控制，就变成了一个弹出式登陆框了哦。