DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV
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的控制，就变成了一个弹出式登陆框了哦。
