关于前端:为什么我写的zindex不生效

48次阅读

共计 4757 个字符，预计需要花费 12 分钟才能阅读完成。

前言

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

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>

总结

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

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

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

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

正文完
前端
发表至： 前端
2022-10-09
 0
关于前端:pinia源码三storeToRefs源码解析
关于前端:程序员职场工具库Excel-应用4-个人工作管理
关于前端:深入理解-JS-中的类型转化
关于前端:前端面试题-数组去重方法总结