一、层叠上下文 MDN
层叠上下文 是指网页上的元素如何显示在其他元素之上,就像您可以将桌面上的索引卡并排放置或相互重叠一样。
当元素重叠的时候,会按照以下规则优先显示在离用户更近的地方,如果两个元素为普通元素,在没有以下指定特性的情况下,会按照后来居上的规则进行覆盖。
二、机制
-
以下行为会建层叠上下文
image.png
定位元素和flex项可以设置z-index来控制层叠顺序
其他方法的z-index为0级别,遵循后来居上原则
- 每一个元素都有自己的层叠上下文环境,默认的是根元素,也就是HTML元素,但是为一个元素创建层叠上下文时候,该元素就成了该元素的所有子元素的层叠上下文环境。
.box {
width: 100px;
height: 200px;
background: red;
position: relative;
}
.box img {
width: 200px;
position: absolute;
z-index: -1;
}
image.png
为什么图片会在他的父元素背景的下面呢?
那是应为上面说的所有元素默认的层叠上下文环境是根元素,按照我们层叠图来看负值的z-index层叠元素会在块级元素的后面,所以图片会跑到父元素的后面,但是只要为把它的父元素变成层叠元素,他的所有子元素就都会重新依赖于该父元素进行排序重叠。
.box {
width: 100px;
height: 200px;
background: red;
position: relative;
z-index: 0; // 把z-index修改为0,就可以创层叠上下文。
}
image.png
-
层叠上下文的一些行为
image.png
1.定位元素默认z-index: auto可以看成是z-index:0;
如果普通元素与层叠上下文元素发生重叠的时候,具有层叠上下文的元素会覆盖普通元素。
.a {
width: 100px;
height: 200px;
background: red;
}
.b {
width: 100px;
height: 100px;
background: yellow;
position: relative;
top: -150px;
}
image.png
2、z-index层叠顺序的比较止步于父级层叠上下文
层叠上下文是可以嵌套的,也就是一个层叠上下文元素的子元素可以建立自己的层叠上下文。但是该元素的层叠上下文不作用于父级上下文之外,该上下文只作用于该父级层叠上下文里面。
.a {
width: 100px;
height: 100px;
background: red;
position: relative;
z-index: 1;
}
.a .img {
position: absloute;
z-index: 999;
}
.b {
width: 100px;
height: 100px;
position: relative;
top: -10px;
z-index: 1;
}
.b .img {
position: absloute;
z-index: -1;
}
image.png
我们会发现就算.a盒子里面的图片设置很大的z-index还是被设置-1的.b盒子里面的图片给覆盖,原因是.a和.b和都设置为层叠上下文元素,而b的层叠顺序比较高。
网友评论