在项目中,同学们有没有和我一样有这样的疑问:
- 为什么我设置的z-index不起作用?
- 子元素如何才能覆盖父元素?
- 为什么设置了z-index大的元素却覆盖不了z-index小的元素?
下面让我们从底层原理逐一解除疑惑。
1、什么是CSS层叠上下文?
层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的
z轴
上延伸,HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间
看到一个很好的比喻,这里引用一下;
可以想象一张桌子,上面有一堆物品,这张桌子就代表着一个层叠上下文。想象在桌子上有四个小方块, 在这四个小方块之上有一片玻璃,而在玻璃片上有一盘水果。 这些方块、玻璃片、水果盘,各自都代表着层叠上下文中一个不同的层叠层,而这个层叠上下文就是桌子。
在网页中都有一个默认的层叠上下文,这个层叠上下文(桌子)的根源就是 <html></html>
。 html标签中的一切都被置于这个默认的层叠上下文的一个层叠层上(物品放在桌子上)。
当你给一个定位元素赋予了除 auto
外的 z-index 值时,你就创建了一个新的层叠上下文,其中有着独立于页面上其他层叠上下文和层叠层的层叠层, 这就相当于把另一张桌子带到了房间里。
总结一下:
- 层叠上下文是HTML元素的三维概念,可以想象为一条垂直于视窗的z轴
- 当元素创建了重叠上下文时,这个元素就有了一个z轴
- 如果内部的子元素发生重叠,会依据自身属性优先级顺序占用z轴(重叠上下文)上的空间
- 优先级最大的元素排在最上面,离用户也最近
2、如何产生层叠上下文?
一般来讲有3种方法:
-
html中的根元素
<html></html>
本身就是层叠上下文,称为根层叠上下文
-
position
属性为非static
值并设置z-index
属性为具体数值 -
一些CSS3属性也能产生层叠上下文
-
一个
flex
元素且其z-index 值不为auto
,也就是父元素display: flex|inline-flex
-
元素的
opacity
属性值小于 1 -
元素的
transform
属性值不为none
-
元素的
mix-blend-mode
属性值不为normal
-
元素的
isolation
属性被设置为isolate
-
在 mobile WebKit 和 Chrome 22+ 内核的浏览器中,position: fixed 总是创建一个新的层叠上下文, 即使 z-index 的值是 “auto”
-
在
will-change
中指定了任意 CSS 属性,即便你没有定义该元素的这些属性 -
元素的
-webkit-overflow-scrolling
属性被设置touch
-
3、层叠等级与层叠顺序
层叠等级
“层叠等级”(层叠水平, Stacking Level) 决定了同一个层叠上下文中元素在z轴上的显示顺序;
- 普通元素的层叠等级优先由其所在的层叠上下文决定
- 层叠等级的比较只有在同一个层叠上下文元素中才有意义
- 在同一个层叠上下文中,层叠等级描述定义的是该层叠上下文中的元素在Z轴上的上下顺序
层叠顺序
“层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序,注意,这里跟上面两个不一样,上面的层叠上下文和层叠水平是概念,而这里的层叠顺序是规则。
下面来看一张7阶层叠水平图。
具体解释为:
- 形成堆叠上下文环境的元素的背景与边框
- 拥有
z-index<0
的子堆叠上下文元素 (负的越高越堆叠层级越低) - 正常流式布局,非
inline-block
,无position
定位(static除外)的子元素 - 无
position
定位(static除外)的 float 浮动元素 - 正常流式布局,
inline-block
元素,无position
定位(static除外)的子元素(包括 display:table 和 display:inline ) - 拥有
z-index=0
的子堆叠上下文元素 - 拥有
z-index>0
的子堆叠上下文元素(正的越低越堆叠层级越低)
看到这张图,相信大家会有疑问:
行内元素的层叠顺序为什么要高于块级元素与浮动元素?
这个理解起来其实很简单,像border/background
属于装饰元素的属性、浮动和块级元素一般用来页面布局,而内联元素一般都是文字内容,并且网页设计之初最重要的就是文字内容,所以在发生层叠时会优先显示文字内容,保证其不被覆盖。
来代码看一下事实是否是这样的:
<div class="box1">1定位z-index<0</div>
<div class="box2">2块级元素</div>
<div class="box3">3浮动</div>
<div class="box4">4行内元素</div>
<div class="box5">5定位z-index=0</div>
<div class="box6">6定位z-index>0</div>
div {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.box1{
position: relative;
z-index: -1;
background: antiquewhite;
}
.box2{
margin-left: 50px;
margin-top: -50px;
background: aqua;
}
.box3{
float: left;
margin-left: 100px;
margin-top: -50px;
background: lightblue;
}
.box4{
display: inline-block;
background: lightcoral;
margin-left: -50px;
}
.box5{
background: lightgreen;
position: relative;
left:200px;
top: -50px;
z-index: 10;
}
.box6{
background: lightsalmon;
position: relative;
left: 250px;
top: -100px;
z-index: 10;
}
层叠等级并不一定由 z-index 决定,只有定位元素的层叠等级才由 z-index 决定,详见下文。其他类型元素的层叠等级由层叠顺序、他们在HTML中出现的顺序、他们的父级以上元素的层叠等级一同决定。
记住一个准则:
- 谁大谁上:定位元素的层级等级由z-index决定,z-index大的覆盖z-index小的。
- 后者居上:当元素的层叠等级一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。
4、z-index
在 CSS 2.1 中, 所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标, 盒模型元素还可以沿着"z 轴"层叠摆放, 当他们相互覆盖时, z轴顺序就变得十分重要。
z-index属性是用来设置元素的堆叠顺序,它可以被设置为正整数、负整数、0、auto,如果一个定位元素没有设置 z-index,那么默认为auto;此时不产生层叠上下文,当z-index设置了数值,此时就产生了一个层叠上下文。z-index的值越大,元素的层级越高,层级高的元素会覆盖在层级低的元素的上面。
使用z-index需要注意:
-
z-index 只适用于定位(
position
属性且值不为static
时)或flex元素,对其他元素无效, -
当父元素设置了z-index属性时,子元素的z-index属性只与同级元素和父级元素作比较时才有意义,与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时,都以父元素的z-index属性值为准进行对比,子元素本身的z-index属性值无效。所以如果你遇到 z-index 值设了很大,但是不起作用的话,就去看看它的父级层叠上下文是否被其他层叠上下文盖住了。
-
当父元素未设置了z-index属性,子元素的z-index属性与父元素外的所有的外部元素进行堆叠层级顺序对比时,都以元素本身的z-index属性值为准进行对比。
5、 实践一下
1、兄弟元素。box1 设置 z-index=0 与 box2未设置z-index
解析:当没有指定z-index的时候, 所有元素都在会被渲染在默认层(0层),所以设置了z-index的元素与未设置z-index的元素层级相同,遵循后面的元素覆盖前面元素的原则。但他们是有本质的区别,z-index设置了数值即产生了层叠上下文,z-index不设置,则不产生层叠上下文。
2、父子元素,父元素未设置z-index,子元素设置了z-index属性
解析:子元素z-index大于等于0时,子元素层级高于父元素层级;当子元素z-index<0时,子元素层级低于父元素层级
3、父子元素,父元素设置了z-index,子元素未设置z-index,或设置z-index
解析:这种情况下,无论父元素z-index设置的多大,无论子元素z-index层级怎么设置,子元素层级永远高于父元素
4、父元素未设置z-index,子元素z-index与父元素同级元素z-index值进行对比
解析:跟父元素的同级元素进行对比,且父元素未设置z-index
,所以是以子元素的z-index
属性值为准与父元素的同级元素进行对比,遵循z-index
属性值大的元素,层级高规则,以及层级相同时,后面元素覆盖前面元素的规则。
5、父元素设置z-index,子元素z-index与父元素同级元素z-index值进行对比
解析:父元素的同级元素进行对比,且父元素设置了z-index
,所以是以父元素的z-index
属性值为准与父元素的同级元素进行对比,同样遵循z-index
属性值大的元素,层级高规则,以及层级相同时,后面元素覆盖前面元素的规则。
6、父元素均未设置z-index
属性,子元素Az-index
属性值与父元素的同级元素的子元素Bz-index
属性值进行对比
解析:首先将每个子元素与其父元素进行比较,box1-son1大于0,所以box1-son1在box1上面,box2-son1大于0,所以box2-son1在box2上面, 争夺季军:再比较box1与box2,由于都未设置z-index,box2位于文档流下面,所以box2在box1上面。 争夺亚军:再比较box2与box1-son1,只要box1-son1大于0,都位于box2的上面。 争夺冠军:再比较box1-son1与box2-son1,遵循z-index谁大谁在上的原则。
7、父元素均设置z-index
属性,子元素Az-index
属性值与父元素的同级元素的子元素Bz-index
属性值进行对比
解析:父元素都设置了z-index,则其子元素无论如何设置,都比父元素层级高,所以各自的子元素一定在各自的父元素上面,此时,可视父子元素为不可分割的一个整体。再比较两个父元素z-index,遵循同样的原则。
8、父元素A未设置z-index
属性,父元素B设置了z-index
属性,子元素Az-index
属性值与父元素的同级元素的子元素Bz-index
属性值进行对比
解析:先比较父子元素:记住一个准则,只要父元素设置了z-index,其子元素无论怎么设置,都在其上面,此时可以认为它们是不可分割的整体,所以box2-son1一定在box2上面,再看box1与box1-son1,只要box1-son1不为负值,都在box1上面 第一步已经得出最下面是box1,再比较box1-son1与box2,遵循谁大谁上,以及后来居上的准则,得出box2位于box1-son1的上面
6、解惑
1、为什么我写的z-index没有生效?
因为它单独使用时不生效,一定要配合定位属性一起,即指定了position属性不是默认的static,其他的absolute、relative、fixed都可以使z-index生效。(在CSS3之后,弹性元素的子元素也可以生效)
2、为什么z-index大的元素却没有盖住z-index小的元素?
看下这个栗子:
父元素的z-index为auto:
父元素的z-index为0:
可以看到,两种情况的表现截然相反。上面我们讲过了,这里再回顾一下,已经了解的略过。
当z-index为auto时,是一个普通元素,两个box-son层比较不受父级的影响,按照规则谁大谁上,所以box1-son1会覆盖box2-son2。 当z-index为0时,会创建一个层叠上下文,此时的层叠规则就发生了变化。每个层叠上下文都是独立的。两个box的层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序。由于两者z-index都是0,所以,遵循层叠规则后来居上,根据在DOM出现的先后顺序决定谁在上面,于是,位于后面的box2覆盖box1。此时box-son元素上的z-index是没有任何意义的。
3、如何让父元素盖住子元素?
这里很多人是不是认为直接让父元素的z-index
大于子元素的z-index
不就好了,可事实真是如此吗?
根据我们上面多次的实践,可以看到这样做是行不通的。父元素设置了z-index为数值,所以它产生了一个层叠上下文,此时子元素无论怎么设置z-index都不可能在父元素的下方。唯一可以实现的方法是将子元素的z-index
设为负值,而父元素只要不产生层叠上下文就可以了。