层叠上下文

Posted 2023-03-15

参考技术A 说到层叠上下文要先引出一个层叠顺序的概念。CSS中所有的元素默认有以下的层叠顺序，如果是兄弟元素的话，默认后面的覆盖在前面的元素的上面。

层叠上下文，又叫堆叠上下文，英文名：The stacking context
层叠上下文是html元素的三维概念，这些HTML元素在一条假想的相对于面向视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
听起来很繁琐，那么如何去理解层叠上下文呢？

在html中，有两个块元素 dad1 和 dad2 ，里面分别对应有自己的子元素 son1 和 son2 。给所有的元素分别设定不同的 background-color 以示区分。

然后将 dad2 中的子元素向上平移直到与 dad1 中的子元素重合，我们会发现， son1 覆盖在了 son2 的上面。这是因为我们给 son1 设定了 z-index 使他高于 son2 ，一切都很正常。那么是否这个 son1 永远都高于 son2 呢？

紧接着，我们将两个父元素都加上 z-index 为1,那么理论上是不影响刚才的结果变化的，那么神奇的事情发生了...

之前权重较低的 son2 突然覆盖在了上面，这是怎么回事呢？

在CSS中，根据正常的层叠顺序，由于有 z-index：2 的存在， son2 在页面中的层叠顺序应该高于 son1 ，但这是相对一个相同的层叠上下文下是生效的。由于在没有给父元素都加上 z-index 之前，默认的层叠上下文是整个 html 下，页面中的所有元素都在这层叠上下文下，遵守着层叠顺序。当我们给父元素都加上 z-index 之后，原来的 dad1 和 dad2 分别生成了两个新的层叠上下文，其中 dad2 的层叠顺序是高于 dad1 。那么其中的子元素因为隶属于不同的层叠上下文，要先比较父元素的层叠顺序。就好比在两个不同的部门下，如果部门的等级高，那么这个部门所有人的等级都要高，哪怕是部门中最低的那个，都要高于低级部门的任何一个人。所以 son2 会出现在上方，权重比 son2 要高。

总结一下，在CSS中，如果没有生成新的层叠上下文，则按照css的默认层叠顺序进行排序。而如果有了新的层叠上下文，则要根据元素所在层叠上下文的权重来排序，层叠上下文高的内部元素，权重都要高于层叠上下文低的内部元素。只要记熟了层叠顺序，理解了层叠上下文的含义，多加练习就可以掌握了。