关于层叠上下文（理解 CSS z-index）

[iwalking11]

层叠上下文【堆叠上下文】

对于堆叠上下文，在MDN中的描述是：
层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。 ž 轴即用户与屏幕间看不见的垂直线。

层叠水平【堆叠水平】

层叠水平顺序决定了同一个层叠上下文中元素在ž轴上的显示顺序

层叠顺序【堆叠顺序】

层叠准则：

1. 层叠上下文的水平比普通元素高。
2. 当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
3. 层叠上下文内部嵌套的子元素均受父元素影响。
4. 层叠上下文不会影响兄弟元素，只会影响后代元素。
5. 在同一层叠水平上时，有明显的z-index值，则值越大，谁在上。
6. 使用了css3属性的时候，层叠顺序是跟z-index:auto/z-index:0是一样的，当他们发生层叠的时候，遵循的是“后来居上”准则。

注意：

1. 普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。
2. 如果父元素没有创建层叠上下文的时候，子元素没有受父元素的限制，父子元素是处于同一层叠水平，比较时需要按上面的7层进行比较。
3. 只设置了position:absolute/relative是不会创建层叠上下文的，此时的div是一个普通元素。
4. position:fixed在chrome等较高级浏览器中，就算设置为z-index:auto也会创建层叠上下文。

层叠上下文的创建

以下摘自 MDN：

• 根元素 (HTML)
• z-index为数值的定位元素
• css3的属性：

1. 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，其子元素为层叠上下文元素
2. opacity 属性值小于 1 的元素
3. transform 属性值不为 "none"的元素
4. mix-blend-mode 属性值不为 "normal"的元素
5. filter值不为“none”的元素
6. perspective值不为“none”的元素
7. isolation 属性被设置为 "isolate"的元素
8. position: fixed
9. 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
10. -webkit-overflow-scrolling 属性被设置 "touch"的元素

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

相关demo代码

参考资料：
MDN-The stacking context
css层叠上下文【stacking context】和层叠顺序【stacking order】

[iwalking11]

CSS postion中z-index负值的应用
这篇文章中遇到这样的场景：

1. 当父元素设置了position属性并且设置了背景颜色，子元素设置了position:absolute和z-index:-1，子元素将会在父元素的层级背后不可见。
2. 如果在父元素样式里加上z-index值，子元素的z-index的负数值将会失效，状态变为可见。

其实原理很简单：

• 场景1中父元素只设置了position:absolute/relative是不会创建层叠上下文的， 此时父子元素同处于页面根元素HTML形成的层叠上下文中，根据层叠顺序图，负z-index元素在普通块级元素下方，所以子元素不可见；
• 场景二中父元素属于z-index为数值的定位元素，形成了层叠上下文，background在负z-index元素下方