DIV布局之道三:DIV块的覆盖,DIV层遮盖其他DIV

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

请看代码:

HTML部分:

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

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

CSS部分:

CSS Code 复制内容到剪贴板
  1. .main { width:960pxheight:800pxbackground-color:#FF9966margin:0px auto;}    
  2. .mask{ z-index:900; position:fixed!importantposition:absoluteleft:0pxtop:0pxwidth: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:-175pxmargin-top:-125pxwidth:334pxheight:180pxbackground-color#6699FFtext-align:centerpadding-top:20px;}  

这里的样式用到了CSS滤镜写法,z-index属性用来指定当前DIV所处的高度(即Z轴的值),预览效果图如下:

DIV覆盖布局

我们可以看到,中间蓝色背景的DIV块是网页中最上面的一个DIV块,覆盖了其他的DIV,当其他DIV块被覆盖后,不允许用户点击被覆盖的内容,实现了约束用户的操作的目的。访客可以自己练习一下这个例子。当我们在中间蓝色背景的DIV中放置登陆框的时候,结合JS的控制,就变成了一个弹出式登陆框了哦。

你可能感兴趣的:(div)