本文已参与「新人创作礼」活动，一起开启掘金创作之路。
——Bug修复员-鲁宽宽
背景
你是否有过编写一段熟悉的css但内心不安的经历。比如z-index属性，你以前使用过很多次，却得到了一个不同的效果，如下面的代码:
你是否可以瞬间知道它们的呈现效果？为什么会产生此效果？
此篇暂时只对position布局来进行说明，想了解更多可以查阅底部的参考链接。
css层叠上下文
由于一些元素的渲染顺序受z-index值的影响，会产生优先级问题。这是由于这些元素所在的场景形成了一个层叠上下文的属性,那么浏览器在渲染的过程中会对此进行额外处理。
那些元素可以触发创建层叠上下文：
- 文档根元素（html）天然的
- position元素
- flex布局
- grid布局
- ......
层叠顺序
针对于position场景的层叠规则
- 谁大谁上：在
同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个 - 后来居上：当元素的
层叠水平一致的时候，在DOM流中处于后面的元素会覆盖前面的元素。
本篇涉及的css示例代码：
.index {
position: relative;
}
.index-box div {
width: 100px;
height: 100px;
}
.blue {
top: 20px;
left: 20px;
}
.red {
top: 30px;
left: 30px;
}
.green {
top: 40px;
left: 40px;
}
依据谁大谁上、后来居上的规则来看看开头图片的展示。
两个box标签元素，都具有z-index值（auto不算），故符合后来居上规则。所以展示红色，即使蓝色的z-index值大，也不会考虑，因为它们的父级元素box已经分出胜负。
再来看个稍复杂些的示例：
技巧是：
- 首先找出共同的层叠上下文
- 其次才能比较z-index
1.green的index：auto 不具备触发层叠上下文的创建，故子集会共享祖先级（index）的作用域。
2.bule与red 会触发层叠上下文的创建，故它们内部元素的z-index值可以忽略。
3.开始比较green、bule、red的z-index大小。
由上面可以得出：
green的index：1
blue的index：1
red的index:0
谁大谁上：red可以确认最小
后来居上：blue的权重最大
结果：blue > green > red
若是想将权重 green > blue > red
只需要将green的auto改为大于1或者子元素的z-index大于1即可。
结语
规则有些绕，多理解后，不论dom的层级有多深，也可以分的清楚。
很开心~，又生产了一篇文章，其中最大的收获就是收集资料的过程。
参考资料：
1、developer.mozilla.org/zh-CN/docs/…
2、www.joshwcomeau.com/css/underst…
3、www.zhangxinxu.com/
