z-index的理解

Z^x

已于 2023-04-28 09:46:31 修改

阅读量44

点赞数

分类专栏： Css 文章标签： html servlet 前端

于 2023-04-10 21:00:00 首次发布

本文链接：https://blog.csdn.net/m0_63219422/article/details/130062483

版权

Css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章介绍了CSS中的z-index属性与层叠上下文的概念，解释了元素在Z轴上的堆叠关系并不只由z-index的数值决定，还受到父元素的影响。并非z-index越大元素越靠前，需在同一层叠上下文比较。创建层叠上下文的方式包括设置position非static、z-index具体值等。总结了比较元素层叠顺序的规则，并强调了DOM结构在确定层叠等级中的作用。

摘要由CSDN通过智能技术生成

今天刷csdn的时候看到了一个很有意思的知识点，是css中的z-index，在这里记录一下

层叠上下文

要了解z-index，首先要了解层叠上下文这个概念：

层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

也就是说如果这个元素含有层叠上下文，就可以理解为这个元素视觉上离我们更近，并且覆盖了一些元素

但是也不是说这个元素的层叠上下文等级高，那么他就一定会在所有元素的上面

下面看一段代码：

<style>
  div {
    width: 100px;
    height: 100px;
    position: relative;
  }
  .box1 {
    z-index: 2;
  }
  .box2 {
    z-index: 1;
  }
  p {
    position: absolute;
    font-size: 20px;
    width: 100px;
    height: 100px;
  }
  .a {
    background-color: blue;
    z-index: 100;
  }
  .b {
    background-color: green;
    top: 20px;
    left: 20px;
    z-index: 200;
  }
  .c {
    background-color: red;
    top: -20px;
    left: 40px;
    z-index: 9999;
  }
</style>

<body>
  <div class="box1">
    <p class="a">a</p>
    <p class="b">b</p>
  </div>

  <div class="box2">
    <p class="c">c</p>
  </div>
</body>

可以看到即使p.c中z-index值远大于p.a&p.b，但是还是没有覆盖他们，是因为他们的父盒子关系是box1>box2，所以p.c用于在p.a&p.b下面

这里要说明的是，不是z-index越大越在前面，要在同层级比较z-index的大小，而不是忽视层级直接看值。

如何开启层叠上下文

HTML中的根元素<html></html>本身j就具有层叠上下文，称为“根层叠上下文”。
普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
css新属性👇

父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素；
元素的opacity属性值不是1；
元素的transform属性值不是none；
元素mix-blend-mode属性值不是normal`；
元素的filter属性值不是none；
元素的isolation属性值是isolate；
will-change指定的属性值为上面任意一个；
元素的-webkit-overflow-scrolling属性值设置为touch。

总结

1、首先先看要比较的两个元素是否处于同一个层叠上下文中：1.1如果是，谁的层叠等级大，谁在上面（怎么判断层叠等级大小呢？——看“层叠顺序”图）。 1.2如果两个元素不在统一层叠上下文中，请先比较他们所处的层叠上下文的层叠等级。 2、当两个元素层叠等级相同、层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面元素之上