层叠加的五条叠加法则（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
投稿猜你喜欢
- 基本索引In [4]: sentence = 'You are a nice girl'In [5]: L = senten
- 上一篇的DOCTYPE声明好以后，接下来的代码是：<html xmlns="xhtml" ta
- 本文实例讲述了python实现的爬取电影下载链接功能。分享给大家供大家参考，具体如下：#!/usr/bin/python#coding=UT
一、下载MySQL 访问MySQL的官网http://www.mysql.com/downloads/&- 本文实例为大家分享了python实现单线程多任务非阻塞TCP服务端的具体代码，供大家参考，具体内容如下# coding:utf-8from
- Python httpx 运行过程中无限阻塞requests 模块只支持 http1，在遇到 http2 的数据接口的时候（某乎的搜索接口）
- argparse模块用法一、 概念argsparse是python的命令行解析的标准模块，内置于python，不需要安装。这个库可以让我们直
- 提到分发请求，相信大多数人首先会想到Nginx，Nginx作为一种多功能服务器，不仅提供了反向代理隐藏主机ip的能力，还拥有简单的缓存加速功
- asp中我们可以利用ERR对象来判断sql语句执行是否成功:SQL="Insert INTO TABLE(F1,F2) value
- pandas可以非常方便的写数据到excel，那么如何写多个dataframe到不同的sheet呢？使用pandas.ExcelWriter
- 我们的每期话题，团队在内部都会通过邮件进行一番讨论，随着讨论的激烈，往往能碰撞出很多有意义的观点，因此，将讨论内容分享出来，有兴趣的朋友可以
- 作为临时测试用python命令来搭建web测试是最好不过的选择了；CD切换到当前目录只需要一句python命令就迅速搭建好了简单的web服务
- Bug如题目所描述。尝试过将按钮的image指向的变量
- vue-draggable之前项目中需要用到拖动排序，就去网上找资料，本来最开始是想用jquery-ui里的拖动的，后面发现不符合我的预期也
- 这篇文章主要介绍了python解析命令行参数的三种方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要
- 在程序中定义一个变量时，这个变量是有作用范围的，变量的作用范围被称为它的作用域。根据定义变量的位置，变量分为两种：局部变量：在函数中定义的变
- 关于matplotlib如何设置图例的位置？如何将图例放在图外？以及如何在一幅图有多个子图的情况下，删除重复的图例？我用一个简单的例子说明一
- 正态分布（Normal distribution）又成为高斯分布（Gaussian distribution）若随机变量X服从一个数学期望为
- 在Thread和Process中，应当优选Process，因为Process更稳定，而且，Process可以分布到多台机器上，而Thread
- 微信小程序canvas写字板效果及实例写字板效果：书写文字，画板重置，导出图片，导出图片前判断是否书写内容app.json：添加一个路由：&
