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

最新推荐文章于 2023-07-08 21:20:59 发布

denghan4400

最新推荐文章于 2023-07-08 21:20:59 发布

阅读量746

点赞数

原文链接：http://www.cnblogs.com/minghualiyan/p/3559948.html

版权

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

请看代码：

HTML部分：

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

这里，网页主体信息放在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块被覆盖后，不允许用户点击被覆盖的内容，实现了约束用户的操作的目的。访客可以自己练习一下这个例子。当我们在中间蓝色背景的DIV中放置登陆框的时候，结合JS的控制，就变成了一个弹出式登陆框了哦。

转载于:https://www.cnblogs.com/minghualiyan/p/3559948.html

关注