关于从父原则的一些测试

从父原则：

通过用fixed absolute relative定位的元素。

其子元素和父辈元素比较z-index的时候，采用父元素的z-index值去比较。同辈之间采用自己的z-index比较。

dom结构：

<div class="test1">
    <div class="test11">
    </div>
</div>
<div class="test2">
</div>

css代码

@charset "UTF-8" ;
*{
margin:0px;
padding: 0px;
}
.test1{
position: fixed;
top:0px;
left: 0px;
width:100%;
height:50px;
background-color: red;
z-index: 0;
}

.test1 .test11{
position: fixed;
width:100px;
height: 100px;
top:20px;
right:20px;
background-color:yellow;
z-index: 999;
}
.test2{
position: relative;
top:50px;
width: 100%;
height:500px;
background-color: blue;
z-index: 0;
}

结果：

在firefox 61.0.2  chorme 67.0.3396.99  IE 11 中测试

均相同，如下图：

当改变红色区域的z-index为1时，黄色区域z-index 为-1时，在上面三个浏览器中测试时，结果如下：

结果分析：在现在主流的IE Chorme firefox中，子元素在与父辈比较时，采用父元素的z-index去比较。

 

dom

<div class="test1">
    <div class="test12">
    </div>
    <div class="test11">
    </div>
</div>
<div class="test2">
</div>

>

css

@charset "UTF-8" ;
*{
margin:0px;
padding: 0px;
}
.test1{
position: relative;
top:0px;
left: 0px;
width:100%;
height:50px;
background-color: red;
z-index: 1;
}

.test1 .test11{
position: relative;
width:100px;
height: 100px;
top:20px;
right:20px;
background-color:yellow;
z-index:-1111;

}
.test1 .test12{
position: absolute;
top:0;
left:0;
width:50px;
height:50px;
background-color:green;
z-index: 0;
}
.test2{
position: relative;
top:0px;
width: 100%;
height:500px;
background-color: blue;
z-index: 0;
}

结果：

分析：子元素在与父辈元素比较的时候，用父辈的z-index去比较。在与同级元素比较的时候，才有自己的z-index去比较。