层叠加的五条叠加法则(3)
作者:14px 来源:蓝色理想 时间:2009-05-01 12:07:00
法则五:【重要】非同辈元素,任意一者或其祖元素拥有动态定位时,同时各自向上寻找动态定位的祖元素,并分别从中拿出具备最高级别的祖元素(或其本身)进行比较。
情况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无法遮住,这些都属于异常情况,大家可以自己搜索一下相关文章。
标签:层,叠加,css,元素
0
投稿
猜你喜欢
Python使用Plotly绘制常见5种动态交互式图表
2023-06-08 06:27:59
tensorflow中的数据类型dtype用法说明
2023-08-28 05:44:30
PHP输出JSON格式数据方式
2023-06-24 06:39:09
Python模拟登录的多种方法(四种)
2023-06-11 21:08:45
python根据字典的键来删除元素的方法
2023-05-08 00:58:57
Mac安装软件时提示已损坏的完美解决方法
2022-12-07 03:11:21
Python学习之字符串常用方法总结
2021-12-19 02:19:46
Python三十行代码实现简单人脸识别的示例代码
2022-08-29 18:07:49
用python编写第一个IDA插件的实例
2022-01-09 13:05:14
举例简单讲解Python中的数据存储模块shelve的用法
2022-10-12 04:23:55
python深度学习tensorflow训练好的模型进行图像分类
2023-02-20 20:40:37
如何用python反转图片,视频
2023-08-27 08:18:21
django 发送手机验证码的示例代码
2023-05-07 03:42:37
ASP+Access数据库安全设置方法小结
2011-04-02 11:09:00
python导入不同目录下的自定义模块过程解析
2022-11-08 16:05:47
用 Python 连接 MySQL 的几种方式详解
2023-07-25 08:08:50
IE6 升级要不要?
2009-07-23 20:44:00
玩转python爬虫之爬取糗事百科段子
2022-09-23 12:20:52
php 生成随机验证码图片代码
2024-05-02 17:33:19
pandas删除某行或某列数据的实现示例
2021-01-05 07:24:33