WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>DIV CSS HTML>>使用z-index和position:absolute实现DIV的裁切、遮盖效果

使用z-index和position:absolute实现DIV的裁切、遮盖效果

[ 录入者:91ctc | 时间:2012-08-01 10:56:01 | 作者: 91ctc| 来源:本站 | 浏览: 次 ]

DIV布局之道三:DIV块的覆盖,DIV层遮盖其他DIV一讲中,我讲述了一个使用DIV覆盖实现了“网页中弹出用户登陆注册框”的效果,由于那个例子使用到了CSS滤镜——灰度的写法,所以对一些初学者来说咋一看上去比较难。所以在本讲当中,我们重新对其原理进行剖析。详细讲解一下使用DIV实现覆盖(遮挡)、裁切的方法。

我们先看代码:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>使用DIV+CSS实现DIV覆盖、遮挡、裁切的功能</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body { margin-top:0px; padding-top:0px;}   
  9. .c { margin:0px auto;}   
  10. .contain_01{ position:absolute; width:300px; height:100px; background:#FF9966; z-index:2; top:-50px;}   
  11. .contain_02{ position:absolute; width:300px; height:100px; background:#0066FF; z-index:1;}   
  12. -->  
  13. </style>  
  14. </head>  
  15. <body>  
  16. <div class="contain_01 c"></div>  
  17. <div class="contain_02 c"></div>  
  18. <div></div>  
  19. </body>  
  20. </html>  

为了演示方便,我们将CSS代码写在html文档中,上面的代码实现的效果如下:

使用DIV+CSS实现DIV覆盖、遮挡、裁切的功能

我们来分析上面的代码:容器contain_01的宽和容器contain_02的宽一致,高也都为100像素,容器contain_01为红色背景,容器contain_02为蓝色背景,从浏览器中预览的效果可以看出,容器contain_02的高度变小了,其高度只有50像素了。还有50像素哪去了呢?这是因为容器contain_01的z轴为2,容器contain_02的z轴为1,显然容器contain_01覆盖遮挡)了容器contain_02,假如在实际开发当中,容器contain_02当中的背景图片是由很多很多小图片拼合而成的,我们要求在页面中只显示其中一个小图片,那么我们这个写法就可以派上用场了,因为这种效果也可以看做是容器contain_01对容器contain_02的裁切,使其显示裁切后的部分。上例中蓝色的部分就是被裁切剩下的。

注意:当你使用z-index的时候,务必使用position:absolute;,也就是说,z-index要和position:absolute同时使用

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号