背景
你有没有在项目中遇到过这种情况，自己写的组件需要有更高的展示层级，于是尝试改变z-index的值来调整层级顺序，但是无论怎样调整z-index的值都无法达到预期效果。也就是说，虽然我们把当前组件的z-index设为了9999999+也无济于事，那么此时我们就进入了一个误区。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
.parent1 {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
z-index: 1;
}
.child {
height: 200px;
width: 200px;
background-color: rgb(132, 132, 201);
position: absolute;
left: 30px;
top: 30px;
z-index: 999;
}
.parent2 {
height: 200px;
width: 200px;
background-color: pink;
position: absolute;
top: 70px;
left: 70px;
z-index: 2;
}
</style>
</head>
<body>
<div class="parent1">
<span>z-index: 1</span>
<div class="child">z-index: 999</div>
</div>
<div class="parent2">z-index: 2</div>
</body>
</html>
我们以为它是这样子显示：
实际上它是这样子
原理
"层叠上下文"是一种用于管理网页元素堆叠顺序和渲染的重要概念。它决定了元素如何在页面上叠加和显示，通常与元素的CSS属性和属性值有关。
最里层的层叠上下文即为执行堆叠的根元素，也就是产生层叠上下文的元素，如示列中的parent1、2、child，每个层叠上下文都遵循以下规则进行展示：
- 执行堆叠的根元素。
- 有设定
position且z-index为负数的元素和它们的子元素-1在-2前面。 - 没有设定
position的元素，一般元素。 - 有设定
position且z-index为auto，设定opacity小于1和其他transforms等属性也在此列。 - 有设定
position且z-index为正数。 - 都一样的时候就按文件中代码出现的先后顺序，后出现的出现在上面。
产生机制
每个层叠上下文中可以嵌套别的层叠上下文，每个层叠上下文中都按同一套层叠顺序规则进行展示。层叠上下文的创建有多种方式：
-
文档根元素，根
<html></html> -
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的元素：transformfilterperspectiveclip-pathmask/mask-image/mask-border
-
isolation属性值为isolate的元素 -
-webkit-overflow-scrolling属性值为touch的元素 -
will-change值设定了任一属性而该属性在non-initial值时会创建层叠上下文的元素（参考这篇文章）； -
contain属性值为layout、paint或包含它们其中之一的合成值（比如contain: strict、contain: content）的元素。
应用
产生了层叠上下文之后，就会按照层叠顺序进行展示，这个过程会应用到浏览器的分层合成机制中
浏览器分层合成机制将网页内容分成多个图层，每个图层都可以独立地渲染。这样可以减少页面重新绘制的需要，提高了性能和响应速度
浏览器会根据布局树生成图层树，为了生成图层树，需要两个条件：
-
拥有
层叠上下文属性的元素会被提升为单独的一层 -
需要剪裁（
clip）的地方也会被创建为图层
示例中的图层树如下所示：
总结
- 因此，当我们的某个元素已经创建了
层叠上下文环境（stacking contetxt），那么它里面的元素再怎么设置z-index也不会影响它的父元素的层叠顺序，也就是说它只能和它所在的层叠上下文环境中的元素进行比较，而他的父元素的堆叠顺序决定了他在父元素所处环境中的位置。 - 也就是说当我们把
z-index设得很大却无济于事的时候，很可能该元素的上层元素已经具备stacking context了。 - 所以，为了达到我们在demo中想要的效果其实也很简单，只要把
parent1的z-index改为3即可。
省流版：元素层级很高还是被遮挡，就看他的父元素层级，以此类推（是不是很快就理解了---调皮）
