·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV

【如有意向点此提交需求】关于我们

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

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

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

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

请看代码：

HTML部分：

xml/HTML Code复制内容到剪贴板
  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部分：

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