为什么我写的z-index不生效？

头像头饰
南玖
     广东
    阅读 6 分钟
    3
    头图

    前言

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

    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轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

    z.png

    我们可以这样来理解：

    • 层叠上下文是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出来之前，相信大家都看过下面这张图：
    z-index.png

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

    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>

    层叠顺序.png

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

    这个理解起来其实很简单，像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-index1.png
    这么看还挺正常的，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-index2.png

    这里我们只是把它们父元素的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-index3.png

    有人是不是又有疑惑了？

    我们这样来理解，父元素定位+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>

    z-index4.png

    总结

    • 层叠上下文的层叠水平要比普通元素高
    • 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文
    • 每个层叠上下文不会影响它的兄弟元素，当进行层叠变化或渲染的时，只和该元素的后代元素有关
    • 每个层叠上下文是独立的，当元素发生层叠的时，它的层叠顺序依赖在父层叠上下文的层叠顺序中

    其余规则看上面层叠顺序的图即可。

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

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

    前端csshtml
    南玖
    1.1k 声望109 粉丝
    « 上一篇
    H5如何实现唤起APP
    下一篇 »
    我用canvas带你看一场流星雨

    引用和评论

    推荐阅读
    头像
    渐进式图片加载：提升前端用户体验的艺术

    南玖阅读 316

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    0 条评论
    得票最新