DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV

DIV布局网页的第三种方式：覆盖。DIV覆盖方式经常应用于网页弹出框的制作，例如在网店系统中，当用户没有登录时，点击购买，系统弹出一个登陆框。

请看代码：

HTML部分：

XML/HTML Code复制内容到剪贴板

1. <body topmargin="0">
2. <div class="main">
3. 网页主体内容，包含网页其他栏目
4. </div>
5. <!--蒙板-->
6. <div class="mask"></div>
7. <div class="opendiv" >
8. 最上层DIV覆盖下面的全部DIV
9. </div>
10. </body>

这里，网页主体信息放在main这个样式所在的DIV块内，我们添加一个蒙版，当弹出一个div时，不允许用户进行其他操作。

CSS部分：

CSS Code复制内容到剪贴板

1. .main { width:960px; height:800px; background-color:#FF9966; margin:0px auto;}
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的控制，就变成了一个弹出式登陆框了哦。