层叠加的五条叠加法则(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
  • asp之家 网络编程 m.aspxhome.com