层叠加的五条叠加法则（3）
作者：14px 来源：蓝色理想 发布时间：2009-05-01 12:07:00
标签：层,叠加,css,元素
法则五：【重要】非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。
情况1：子元素的z-index无论多大，父元素大者居上。
情况2：父元素居下，子元素也可以居上。
情况1、情况2结合扩展比较。
运行代码框
引用:
其实前四点都是基础，只有第五点比较难于理解，这里详细解释一下：
<div id="ab" style="position:absolute;">
<div id="a" style="position:relative; z-index:100;">
<div id="a_inner1">
<div id="a_inner2">
<div id="a_inner3" style="position:relative; z-index:98;">
<div id="a_inner4">
<div id="a_inner5">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="b">
<div id="b_inner1">
<div id="b_inner2">
<div id="b_inner3" style="position:relative; z-index:99;">
<div id="b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>
在这个例子中，我们来比较div#a_inner5和div#b_inner4的层叠关系。
到它们所共同拥有的祖元素div#ab的下一级为止，div#a_inner5的祖元素包括：div#a,div#a_inner1,div#a_inner2,div#a_inner3,div#a_inner4；div#b_inner4的祖元素包括：div#b,div#b_inner1,div#b_inner2,div#b_inner3。
然后分析它们的祖元素中具有动态定位的：div#a_inner5的祖元素中含有动态定位的元素有：div#a,div#a_inner3；div#b_inner4的祖元素中含有动态定位的元素有：div#b_inner3。
然后再拿出最高级进行比较：div#a > #div#b_inner3。
父元素居下，子元素也可以居上的情况，则是利用非同辈元素在祖元素具备动态布局时，其比较已经与position:static无关，而其祖元素却可以通过html的位置来进行比较。
引用结束
当然，有时候还存在特例，比如flash、比如ie6中的select无法遮住，这些都属于异常情况，大家可以自己搜索一下相关文章。
0
投稿猜你喜欢
- 复制代码 代码如下: public partial class CMS_DBDataContext { partial void OnCre
- vbscript中，错误处理使用on error resume next来完成，如果在你的代码里加入这一句，在这句之后的其他代码如果出现错误
- [数据恢复故障描述]一台重要的MYSQL数据库服务器，146GB*2，RAID1，约130GB DATA卷，存储了大约200~300个数据库
- 网站标准（或称“WEB标准”）对于每一个开发网站和做网页的人来说，都是不可忽视的，这不仅是一个潮流，而是一个标准，一个更加符合规范的做法，而
- 1. TVP， 表变量，临时表，CTE 的区别 TVP和临时表都是可以索引的，总是存在tempdb中，会增加系统数据库开销，而表变量和CTE
- 我们以用户查询语句为 https://www.aspxhome.com/chunfeng.asp为例来查询用户资料将从数据库Contact1
Web性能优化最佳实践中最重要的一条是减少HTTP请求，它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScr- 代码如下:'******************************************** '函数名：I
- Yahoo和Google都有自己的建设高性能网站最佳实践, 我不做赘述, 需要了解的自行查阅资料:Yahoo的: Best Practice
- Javascript中的eval函数让我们可以很方便地操作一系列变量（a1,a2,a3,……）。自从VBScript 5.0之后，我们也可以
- 阅读：Dreamweaver量身打造Wordpress留言板（一）虽然说在Dreamweaver量身打造Wordpress留言板（二）这一篇
- 近段时间由于修改一个ASP程序(有SQL注入漏洞)，在网上找了很多相关的一些防范办法，都不近人意，所以我将现在网上的一些方法综合改良了一下，
- 可以采用exec方法注意：使exec不能返回一些变量的值，而且当前的变量值在exec的语句里无效。declare @tempStr
- 在asp中调用sql server的存储过程可以加快程序运行速度，本文介绍了asp使用存储过程的方法。1.调用存储过程的一般方法 先假设在s
- 精妙的"SQL"语句:◆复制表(只复制结构,源表名：a 新表名：b)SQL: select * into b from
- show tables或show tables from database_name;解释：显示当前数据库中所有表的名称show datab
- 最近在改个程序用到了在js中设置css的float属性，以为和平常的写法一样，原来不是，只好去请教google，原来...首先大家先来看一下
- 当你在浏览网页时，看到一个很漂亮的特效，你查看源代码时看到的是一队乱码，那多扫兴呀！根据本人的研究，总结出了三种解密方法，与大家分享！！方法
- 《用户研究角度看设计》系列是淘宝的用户研究团队在可用性测试之后的点滴思考。在每次与淘宝用户的直接接触、观察用户的操作之后，作为体验分析师的我
- MySQL使用环境变量TMPDIR的值作为保存临时文件的目录的路径名。如果未设置TMPDIR，MySQL将使用系统的默认值，通常为/tmp、
