css--深入由z-index引发的层叠上下文、层叠等级和层叠顺序的思考

代码段1如下：我们只需要改变box盒子的z-index值的大小就会改变盒子的层叠顺序。

复制代码

box1

box2

box3

复制代码 　　初次看上面的代码，会发现 z-index 值越大在z轴上就越靠上，离浏览器屏幕越近。但是仔细思考，你会发现这里存在很多疑惑：z-index是在任何元素上面都有效果吗？难道z-index的值的大小直接影响到元素的层叠顺序吗？

我们再来看下下面的代码段2：

复制代码

1

2

1

2

复制代码 　　效果如下：

产生这样的效果，究竟是为什么呢，明明box2-item1、box2-item2 的z-index属性值更大，结果这两个盒子会被覆盖了呢。要想彻底知道其中的缘由，我们需要知道层叠上下、层叠等级、层叠顺序这几个概念。

2、层叠上下文
　　层叠上下文(Stacking context)，是html页面中的一个三维的概念，就是上面提到的 z-index 的产生，导致页面有了z轴。默认a-index值为 aotu ,即z轴的0点处，同时可以设置z-index为正值和负值，表示该层叠上下文元素在z轴距离屏幕的远近。

3、层叠等级
　　层叠等级（stacking level）,在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。在其他普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序。只有在同一层叠上下文中，层叠等级才有意义，z-index优先级最高。产生层叠上下文的条件：

文档根元素（）；

position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；

position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；

flex (flexbox (en-US)) 容器的子元素，且 z-index 值不为 auto；

grid (grid) 容器的子元素，且 z-index 值不为 auto；

opacity 属性值小于 1 的元素（参见 the specification for opacity）；

mix-blend-mode 属性值不为 normal 的元素；

以下任意属性值不为 none 的元素：isolation 属性值为 isolate 的元素；isolation 属性值为 isolate 的元素；isolation属性值为isolate的元素

transform
filter
perspective
clip-path
mask / mask-image / mask-border
-webkit-overflow-scrolling 属性值为 touch 的元素；

isolation 属性值为 isolate 的元素；
will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；

contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。
深圳网站建设www.sz886.com