你是不是遇到过这种情况：
设置了 z-index: 9999，结果你的元素还是被其他东西“欺负”藏到后面去了？
放心，这种感觉我也深有体会，曾经对着屏幕狂喊，查了无数次谷歌。
真相是：z-index 没坏，问题出在你可能正在和一个看不见的“力场”——堆叠上下文（stacking context）作斗争。
一旦搞懂它，你再也不用盲目提高数字来“救急”了。
下面轻松说说 z-index 和堆叠上下文。
z-index 基础理解
在 CSS 中，z-index 控制重叠元素的前后顺序。
值越大，元素越靠前显示。
.box1{
position: relative;
z-index: 1;
}
.box2 {
position: relative;
z-index: 2;
}例如，.box2 的 z-index 高于 .box1，所以它会显示在前面。
定位对 z-index 的影响
z-index 只有在元素设置了非默认定位（非 static）时才生效。
换句话说，你得把元素设置成 relative、absolute、fixed 或 sticky，z-index 才会起作用。
如果没设置，z-index 是白搭。
堆叠上下文：无形的界限
堆叠上下文就像元素沿着 z 轴的“立体宇宙”。
在不同的堆叠上下文中，z-index 只在当前上下文里比较，无法跨上下文“穿越”。
哪些 CSS 属性会创建新的堆叠上下文呢？比如：
带有非 autoz-index的定位元素不等于 1 的 opacity非 none的transform、filter、perspective、clip-path、maskcontain和will-change指定的属性
.parent{
position: relative;
z-index: 1;
}
.child {
position: relative;
z-index: 999;
}举例来说，.child 即使 z-index 比父元素外的元素高，也无法超越 .parent 堆叠上下文的限制。
常见问题与对策
没设置定位记得给元素设个非
static定位。嵌套堆叠上下文注意父元素是否创建了新的堆叠上下文，会限制子元素的层级关系。
意外创建堆叠上下文比如不小心用到
opacity小于 1 或transform，让你没想到的新上下文诞生。
调试技巧
用浏览器开发者工具查看元素的计算样式，找出实际的
z-index和堆叠上下文。简化结构暂时注释 CSS，查找哪个属性导致了新的堆叠上下文。
明确设置 z-index必要时给父元素也加上
z-index，以控制堆叠顺序。
总结
理解 z-index 和堆叠上下文的工作原理，是控制网页元素层叠顺序的关键。
只要确保定位正确，留心堆叠上下文的产生，你就能轻松掌控元素显示层级。
