为什么我写的z-index无效?

567 阅读11分钟

在项目中,同学们有没有和我一样有这样的疑问:

  • 为什么我设置的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属性也能产生层叠上下文

    1. 一个 flex 元素且其z-index 值不为 auto,也就是父元素 display: flex|inline-flex

    2. 元素的 opacity 属性值小于 1

    3. 元素的 transform 属性值不为 none

    4. 元素的 mix-blend-mode 属性值不为 normal

    5. 元素的 isolation 属性被设置为 isolate

    6. 在 mobile WebKit 和 Chrome 22+ 内核的浏览器中,position: fixed 总是创建一个新的层叠上下文, 即使 z-index 的值是 “auto”

    7. will-change 中指定了任意 CSS 属性,即便你没有定义该元素的这些属性

    8. 元素的 -webkit-overflow-scrolling 属性被设置 touch

3、层叠等级与层叠顺序

层叠等级

“层叠等级”(层叠水平, Stacking Level) 决定了同一个层叠上下文中元素在z轴上的显示顺序;

  • 普通元素的层叠等级优先由其所在的层叠上下文决定
  • 层叠等级的比较只有在同一个层叠上下文元素中才有意义
  • 在同一个层叠上下文中,层叠等级描述定义的是该层叠上下文中的元素在Z轴上的上下顺序

层叠顺序

“层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序,注意,这里跟上面两个不一样,上面的层叠上下文和层叠水平是概念,而这里的层叠顺序是规则

下面来看一张7阶层叠水平图。

image.png

具体解释为:

  1. 形成堆叠上下文环境的元素的背景与边框
  2. 拥有 z-index<0 的子堆叠上下文元素 (负的越高越堆叠层级越低)
  3. 正常流式布局,非 inline-block,无 position 定位(static除外)的子元素
  4. 无 position 定位(static除外)的 float 浮动元素
  5. 正常流式布局, inline-block元素,无 position 定位(static除外)的子元素(包括 display:table 和 display:inline )
  6. 拥有 z-index=0 的子堆叠上下文元素
  7. 拥有 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;
}

image.png

层叠等级并不一定由 z-index 决定,只有定位元素的层叠等级才由 z-index 决定,详见下文。其他类型元素的层叠等级由层叠顺序、他们在HTML中出现的顺序、他们的父级以上元素的层叠等级一同决定。

记住一个准则:

  • 谁大谁上:定位元素的层级等级由z-index决定,z-index大的覆盖z-index小的。
  • 后者居上:当元素的层叠等级一致、层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。

4、z-index

在 CSS 2.1 中, 所有的盒模型元素都处于三维坐标系中。 除了我们常用的横坐标和纵坐标, 盒模型元素还可以沿着"z 轴"层叠摆放, 当他们相互覆盖时, z轴顺序就变得十分重要。

z-index属性是用来设置元素的堆叠顺序,它可以被设置为正整数负整数0auto,如果一个定位元素没有设置 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

image.png image.png

解析:当没有指定z-index的时候, 所有元素都在会被渲染在默认层(0层),所以设置了z-index的元素与未设置z-index的元素层级相同,遵循后面的元素覆盖前面元素的原则。但他们是有本质的区别,z-index设置了数值即产生了层叠上下文,z-index不设置,则不产生层叠上下文。

2、父子元素,父元素未设置z-index,子元素设置了z-index属性

image.png

解析:子元素z-index大于等于0时,子元素层级高于父元素层级;当子元素z-index<0时,子元素层级低于父元素层级

3、父子元素,父元素设置了z-index,子元素未设置z-index,或设置z-index

image.png

解析:这种情况下,无论父元素z-index设置的多大,无论子元素z-index层级怎么设置,子元素层级永远高于父元素

4、父元素未设置z-index,子元素z-index与父元素同级元素z-index值进行对比

image.png image.png image.png

解析:跟父元素的同级元素进行对比,且父元素未设置z-index,所以是以子元素的z-index属性值为准与父元素的同级元素进行对比,遵循z-index属性值大的元素,层级高规则,以及层级相同时,后面元素覆盖前面元素的规则。

5、父元素设置z-index,子元素z-index与父元素同级元素z-index值进行对比

image.png image.png

解析:父元素的同级元素进行对比,且父元素设置了z-index,所以是以父元素的z-index属性值为准与父元素的同级元素进行对比,同样遵循z-index属性值大的元素,层级高规则,以及层级相同时,后面元素覆盖前面元素的规则。

6、父元素均未设置z-index属性,子元素Az-index属性值与父元素的同级元素的子元素Bz-index属性值进行对比

image.png image.png

解析:首先将每个子元素与其父元素进行比较,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属性值进行对比

image.png image.png

解析:父元素都设置了z-index,则其子元素无论如何设置,都比父元素层级高,所以各自的子元素一定在各自的父元素上面,此时,可视父子元素为不可分割的一个整体。再比较两个父元素z-index,遵循同样的原则。

8、父元素A未设置z-index属性,父元素B设置了z-index属性,子元素Az-index属性值与父元素的同级元素的子元素Bz-index属性值进行对比

image.png image.png

解析:先比较父子元素:记住一个准则,只要父元素设置了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:

image.png image.png

父元素的z-index为0:

image.png image.png

可以看到,两种情况的表现截然相反。上面我们讲过了,这里再回顾一下,已经了解的略过。

当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设为负值,而父元素只要不产生层叠上下文就可以了。