前言

置信大家在工作中都遇到过这样一些奇怪的问题：

1.为什么我写的z-index没有失效？

2.为什么z-index大的元素却没有盖住z-index小的元素？

3.如何让父元素盖住子元素呢？

以上这些问题都跟CSS层叠上下文无关，带着下面这些问题咱们一起来理解一下什么是CSS层叠上下文，以及这些奇怪景象背地的原理！

如果这篇文章有帮忙到你，❤️关注+点赞❤️激励一下作者，文章公众号首发，关注 前端南玖 第一工夫获取最新文章～

什么是CSS层叠上下文？

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的绝对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延长，HTML元素根据其本身属性依照优先级程序占用层叠上下文的空间。

z轴

在CSS2.1标准中，每个盒模型的地位是三维的，别离是立体画布上的X轴，Y轴以及示意层叠的Z轴。个别状况下，元素在页面上沿X轴Y轴平铺，咱们觉察不到它们在Z轴上的层叠关系。而一旦元素产生重叠，这时就能发现某个元素可能笼罩了另一个元素或者被另一个元素笼罩。

咱们能够这样来了解：

  • 层叠上下文是HTML元素的三维概念，能够设想为一条垂直于视窗的z轴
  • 当元素创立了重叠上下文时，这个元素就有了一个z轴
  • 如果外部的子元素产生重叠，会根据本身属性优先级程序占用z轴（重叠上下文）上的空间
  • 优先级最大的元素排在最下面，离用户也最近

如何产生层叠上下文?

理解了层叠上下文，咱们还要晓得层叠上下文是如何产生的。

一般来讲有3种办法：

  • html中的根元素<html></html>自身就是层叠上下文，成为根层叠上下文
  • position属性为非static值并设置z-index属性为具体数值

  • 一些CSS3属性也能产生层叠上下文

    • 一个 flex 元素(flex item)，且 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”

层叠等级与层叠程序

层叠等级

层叠等级(stacking level，叫“层叠级别”/“层叠程度”也行)，它决定了同一个层叠上下文中元素在z轴上的显示程序（层叠程序） ，也就是说一般元素的层叠程度优先由层叠上下文决定。

层叠程序

“层叠程序”英文称作”stacking order”. 示意元素产生层叠时候有着特定的垂直显示程序，留神，这里跟下面两个不一样，下面的层叠上下文和层叠程度是概念，而这里的层叠程序是规定。

从下面产生层叠上下文的办法，咱们能够分为CSS2.1与CSS3两类，在CSS3进去之前，置信大家都看过上面这张图：

看到这张图，置信大家最有疑难的是行内元素的层叠程序要高于块级元素与浮动元素。

OK，有疑难就入手实际一遍，看看是不是真是这样：

<style>  div {    width: 100px;    height: 100px;    border: 1px solid saddlebrown;  }  .box1 {    position: relative;    z-index: -1;    background: violet;  }  .box2 {    margin-top: -50px;    margin-left: 50px;    background: salmon;  }  .box3 {    float: left;    margin-top: -50px;    margin-left: 100px;    background: wheat;  }  .box4 {    display: inline-block;    background: greenyellow;    margin-left: -50px;  }  .box5 {    position: relative;    z-index:0;    left: 200px;    top: -50px;    background: palevioletred;  }  .box6 {    position: relative;    z-index: 1;    left: 250px;    top: -100px;    background: gold  }</style></head><body>  <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></body>

行内元素的层叠程序为什么要高于块级元素与浮动元素

这个了解起来其实很简略，像border/background属于装璜元素的属性，浮动和块级元素个别用来页面布局，而内联元素个别都是文字内容，并且网页设计之初最重要的就是文字内容，所以在产生层叠时会优先显示文字内容，保障其不被笼罩。

层叠程序规定

  • 谁大谁上：当具备显著的层叠程度标示的时候，比如说z-index值，在同一个层叠上下文畛域，层叠程度值大的笼罩小的
  • 青出于蓝：当元素的层叠程度统一、层叠程序雷同的时候，在DOM流中处于前面的元素会笼罩后面的元素。

z-index

z-index 属性设定了一个定位元素及其后辈元素或 flex 我的项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会笼罩较小的元素在下层进行显示。

属性值

  • auto: 默认值，以后值与父级雷同
  • <integer>: 整型数字

根本个性

  1. z-index 属性容许为负值。
  2. z-index 属性反对 CSS3 animation 动画。
  3. 在 CSS 2.1 的时候，须要配合 position 属性且值不为 static 时应用。

解惑

理解完下面这些内容，当初咱们再来看一看前文提到的一些问题

1.为什么我写的z-index没有失效？

这个很简略，因为它独自应用时不失效，肯定要配合定位属性一起，即只对指定了position属性的元素失效——只有不是默认值static，其余的absolute、relative、fixed都能够使z-index失效。(在CSS3之后，弹性元素的子元素也能够失效)

2.为什么z-index大的元素却没有盖住z-index小的元素？

这里咱们能够来看一个乏味的景象

<style>  .box1 {    width: 200px;    height: 100px;    background: red;  }  .box2 {    width: 100px;    height: 200px;    background: greenyellow;  }</style><div style="position:relative; z-index:auto;">  <div style="position:absolute; z-index:2;" class="box1">box1--z-index=2</div></div><div style="position:relative; z-index:auto;">  <div style="position:relative; z-index:1;" class="box2">box2--z-index=1</div></div>


这么看还挺失常的，z-index值大的在z-index值小的上方。接下来咱们略微改一改，你就能看到奇怪的景象了

<div style="position:relative; z-index:0;">  <div style="position:absolute; z-index:2;" class="box1">box1--z-index=2</div></div><div style="position:relative; z-index:0;">  <div style="position:relative; z-index:1;" class="box2">box2--z-index=1</div></div>

这里咱们只是把它们父元素的z-index属性从auto改成了0，两种状况的体现却截然相同。

产生这种景象的起因咱们也可能从下面的实践中找到答案：position属性为非 static值并设置z-index属性为具体数值能力产生层叠上下文

当z-index为auto时，是一个一般元素，两个box层比拟不受父级的影响，依照规定谁大谁上，于是z-index为2的box笼罩值为1的box； 当z-index为0时，会创立一个层叠上下文，此时的层叠规定就产生了变动。层叠上下文个性里最初一条规定，每个层叠上下文都是独立的。两个box的层叠程序比拟变成了优先比拟其父级层叠上下文元素的层叠程序。因为两者z-index都是0，所以，遵循层叠规定青出于蓝，依据在DOM呈现的先后顺序决定谁在下面，于是，位于前面的box2笼罩box1。此时box元素上的z-index是没有任何意义的。

3.如何让父元素盖住子元素？

这里很多人是不是认为间接让父元素的z-index大于子元素的z-index不就好了，可事实真是如此吗？

<style>  .outer {    position: relative;    width: 100px;    height: 200px;    background: salmon;    z-index: 3;  }  .inner {    position: relative;    width: 50px;    height: 200px;    background: cadetblue;    z-index: 1;  }</style><div class="outer">  父元素  <div class="inner">子元素</div></div>

有人是不是又有纳闷了？

咱们这样来了解，父元素定位+z-index为数值，所以它产生了一个层叠上下文，此时子元素无论怎么设置z-index都不可能在父元素的下方。惟一能够实现的办法是将子元素的z-index设为负值，而父元素只有不产生层叠上下文就能够了。

<style>  .outer {    position: relative;    width: 100px;    height: 200px;    background: salmon;    /**z-index: 3;**/  }  .inner {    position: relative;    width: 50px;    height: 200px;    background: cadetblue;    z-index: -1;  }</style><div class="outer">  父元素  <div class="inner">子元素</div></div>

总结

  • 层叠上下文的层叠程度要比一般元素高
  • 层叠上下文能够嵌套，外部层叠上下文及其所有子元素均受制于内部的层叠上下文
  • 每个层叠上下文不会影响它的兄弟元素，当进行层叠变动或渲染的时，只和该元素的后辈元素无关
  • 每个层叠上下文是独立的，当元素产生层叠的时，它的层叠程序依赖在父层叠上下文的层叠程序中

其余规定看下面层叠程序的图即可。

原文首发地址点这里，欢送大家关注公众号 「前端南玖」，如果你想进前端交换群一起学习，请点这里

我是南玖，咱们下期见！！！