深入浅析css中的层叠上下文

前段时间，公司开始推进低代码平台业务，我有幸的参与其中。在这期间牵扯到了css的层叠上下文，并给我带来了一定的困扰，为了更好的实现业务逻辑，我觉得好好的深入研究一下css的层叠上下文。想必大家都知道网页是二维空间的，但是内容却是三维的，除了比较直观的x、y之外，还存在一个不是很直观的z轴。

层叠上下文元素

我们日常开发过程中，比较经常使用的涉及层叠上下文的属性主要有几种：

• position: absolute | fixed | relative | sticky

• z-index

• float: left | right

• transform

层叠等级比较

在不牵扯到祖孙嵌套的前提下，简单的层级对比：

z-index: -1 < 普通元素 < float < position < transform < z-index > 0

在牵扯到祖先元素已经产生了层叠上下文的时候，那是后代元素的层叠等级会受到祖先元素的影响。

Note: 层叠上下文的层级是 HTML 元素层级的一个子级，因为只有某些元素才会创建层叠上下文。可以这样说，没有创建自己的层叠上下文的元素会被父层叠上下文同化。

实战问题

在可视化实现的过程中，碰到了一个问题：在嵌套层级的拖拽的过程，由于嵌套的父元素上已经存在了层级问题，导致祖孙元素受到祖先元素的影响，拖拽的时候会出现被“正常文档流”的元素所覆盖的情况。经过一段时间的研究，产生该问题的原因就是受不同层叠上下文的影响导致的。

实战

1. 同层级的层叠上下文比较

由于代码量太多，这里就不浪费篇幅进行展示了，直接上我运行的结果。通过下面的图片，我们可以对上文提到的同层级的层级比较做出印证。

2. 不同position的层叠上下文比较

对于position来说，在不使用z-index的情况下，兄元素的层叠上下文大于弟元素的层叠上下文。用人话说，就是后面的元素的层叠上下文高于前面的元素。

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      background: red;
    }

    .relative {
      position: relative;
      top: 20px;
      left: 20px;
      background: green;
    }

    .absolute {
      position: absolute;
      top: 60px;
      left: 60px;
      background: yellow;
    }

    .sticky {
      position: sticky;
      top: 60px;
      left: 90px;
      background: pink;
    }

3. 不同层叠上下文中的层叠等级比较

首先我们先复现一下上面提到实战问题，不同层叠上下文里面的层叠等级实现。

红色块和绿色块是两个同级元素，其中红色的层叠等级高于绿色的层叠等级，导致红色块中的两个元素即使层叠等级低于橙色的块元素，但是实际效果是，橙色的层叠等级低于另外的块元素。

    .purple {
      top: 20px;
      left: 20px;
      background: purple;
      z-index: 10;
    }

    .pink {
      top: 60px;
      left: 60px;
      background: pink;
      z-index: 20;
    }

    .orange {
      top: 10px;
      left: 10px;
      background: orange;
      z-index: 999;
    }

这里，提一下我对于上面的问题的解决办法，就是动态修改祖先元素的层叠等级。不过，我个人觉得这个方式有待研究，对于嵌套层级较多的时候，比较笨重。如果有小伙伴有更好的方式的话，欢迎在下面留言。

（学习视频分享：css视频教程）

以上就是深入浅析css中的层叠上下文的详细内容，更多请关注自由互联其它相关文章！