层叠加的五条叠加法则（3）

作者：14px 来源：蓝色理想时间：2009-05-01 12:07:00　

法则五：【重要】非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。

情况1：子元素的z-index无论多大，父元素大者居上。

情况2：父元素居下，子元素也可以居上。

情况1、情况2结合扩展比较。

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>法则五：非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。</title> </head> <style type="text/css"> div { font:12px/1.5 arial;} div strong { color:#fff; background:#036; display:inline-block;} h3 strong { color:#f00;} /*--- 定义方块外形 ---*/ .div1, .div2 { height:70px; width:150px; background:#cff; border:1px solid #036; } .grandDiv1, .grandDiv2 { padding:10px; border:1px solid #060; width:174px; background:#cf9; } .parentDiv1, .parentDiv2 { padding:10px; border:1px solid #f06; width:152px; background:#fcf; } /*--- 定义方块偏移位置、文字位置 ---*/ .grandDiv2 { margin-top:-50px; margin-left:95px; } .parentDiv2 { margin-top:-40px; margin-left:85px; } .div2 { margin-top:-20px; margin-left:75px; padding-top:30px; height:40px; } .grandDiv2 .parentDiv2, .grandDiv2 .div2, .parentDiv2 .div2 { margin:0;} </style> <body> <h3>法则五<strong>（重要）</strong>：非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素至共有的祖元素的下一级为止，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。</h3> <p>情况1：子元素的z-index无论多大，父元素大者居上。<p> <div class="parentDiv1" style="position:relative; z-index:2;"> .parentDiv1{position:relative;<strong>z-index:2</strong>} <div class="div1">.div1{position:static}</div> </div> <div class="parentDiv2" style="position:relative; z-index:1;"> <div class="div2" style="position:relative; z-index:10000;">.div2{position:relative;<strong>z-index:10000</strong>}</div> .parentDiv2{position:relative;<strong>z-index:1</strong>} </div> <p>情况2：父元素居下，子元素也可以居上。<p> <div class="parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative;">.div1{position:relative}</div> </div> <div class="parentDiv2"> <div class="div2">.div2{position:staitc}</div> .parentDiv2{position:staitc} </div> <p>情况1、情况2结合扩展比较。<p> <div class="grandDiv1" style="position:relative; z-index:3;"> .grandDiv1{position:relative;<strong>z-index:3</strong>} <div class="parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative; z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong>}</div> </div> </div> <div class="grandDiv2"> <div class="parentDiv2" style="position:relative; z-index:4;"> <div class="div2">.div2{position:staitc}</div> .parentDiv2{position:relative;<strong>z-index:4</strong>} </div> .grandDiv2{position:static;} </div> </body></html>

引用:

其实前四点都是基础，只有第五点比较难于理解，这里详细解释一下：

<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无法遮住，这些都属于异常情况，大家可以自己搜索一下相关文章。

第一页上一页 1 2

标签：层,叠加,css,元素

投稿

层叠加的五条叠加法则（3）

猜你喜欢

Python使用Plotly绘制常见5种动态交互式图表

tensorflow中的数据类型dtype用法说明

PHP输出JSON格式数据方式

Python模拟登录的多种方法(四种)

python根据字典的键来删除元素的方法

Mac安装软件时提示已损坏的完美解决方法

Python学习之字符串常用方法总结

Python三十行代码实现简单人脸识别的示例代码

用python编写第一个IDA插件的实例

举例简单讲解Python中的数据存储模块shelve的用法

python深度学习tensorflow训练好的模型进行图像分类

如何用python反转图片,视频

django 发送手机验证码的示例代码

ASP+Access数据库安全设置方法小结

python导入不同目录下的自定义模块过程解析

用 Python 连接 MySQL 的几种方式详解

IE6 升级要不要？

玩转python爬虫之爬取糗事百科段子

php 生成随机验证码图片代码

pandas删除某行或某列数据的实现示例