1-什么是层叠上下文
按照我自己的理解还有查找到的资料
- 层叠上下文是基于Z轴的一个环境,这个环境其实一直都存在。
- 它的默认层叠顺序原则是:
- 同级元素中,后面的元素覆盖前面的元素,
- 父子元素中,子元素覆盖父元素
- 它的默认层叠顺序原则是:
- 层叠顺序,就是层叠上下文元素在层叠上下文中的前后顺序
举个例子
<!--DOM结构-->
<div class="oneContainer">
<div class="itemGreen"></div>
<div class="itemRed"></div>
</div>
//css部分
.oneContainer{
width:300px;
height: 300px;
background: yellow;
}
.itemGreen{
width: 150px;
height: 150px;
background: green;
}
.itemRed{
width: 150px;
height: 150px;
background: red;
margin-top: -50px;
margin-left:50px;
}
结果显示
根据上面的图片,可以知道默认的顺序层叠都是成立的
2-控制元素在层叠上下文中的位置
如果我们想控制一个元素在层叠上下文中的位置,那么必须在css上增加两个东西
- position 增加一个css属性,但是这个定位不能是static
- z-index 增加一个z-index的属性,这个属性控制元素在Z轴上面的位置
举个例子
还是上面的例子
.itemGreen{
width: 150px;
height: 150px;
background: green;
position: relative;
z-index: 2;
}
.itemRed{
width: 150px;
height: 150px;
background: red;
margin-top: -50px;
margin-left:50px;
position: relative;
z-index: 1;
}
我们为上面的例子中的 itemGreen类和itemRed类增加了定位和z-index;
答案是非常明显的,绿色的z-index比红色的高,所以就可以控制z轴的位置
另外,没有这两个css属性的元素z轴的位置其实是0,或者auto,它们的默认原则还是默认的层叠顺序
即
- 它的默认层叠顺序原则是:
- 同级元素中,后面的元素覆盖前面的元素,
- 父子元素中,子元素覆盖父元素
3-层叠上下文中的父子元素嵌套情况
在父子元素嵌套中,首先要分析几种情况
*这里有个小说明,为了方便书写,这边将控制z轴前后顺序的定位和z-index这两个css属性简单写为这两个css属性
- 首先是父元素有没有具备两个css属性,而子元素有这两个css属性,且不含子元素
- 如果是父元素中的具备这两个css属性,而子元素没有这两个css属性,且不含子元素
- 如果A元素的子元素B含有一个子元素C,
- 第一种情况,父元素没有这两个css属性,子元素有,那么子元素就可以控制z轴的层叠顺序
- 第二种情况,父元素有这个两个css属性,子元素没有,父元素不能控制自身在z轴上的层叠顺序
- 第三种情况,A元素含有一个子元素B,且这个子元素B还有一个子元素C,无论这ABC含有这两个css的情况是多么复杂,记住一句话就行了,一个元素想控制自身的z轴层叠顺序,必须满足DOM上的这些结构, 这个元素不能含有子元素,且这个子元素的第一个父元素不能控制自身的z轴层叠顺序,即不能含有定位和z-index这两个css属性。,这句话同样适用第一种和第二种情况。
小结,除了在DOM上的结构会影响到元素控制z轴上面的层叠顺序,css某些属性也会影响z的层叠顺序,这里就不作展开。