chrome devtools中识别层叠上下文最可靠方式是在elements面板选中元素后，于右侧layout标签页查看「stacking context」字段：显示yes即为层叠上下文根，no或不显示则未创建；触发条件包括opacity
用Chrome DevTools直接看“Stacking Context”标识
最可靠的方式不是靠猜，而是让浏览器告诉你。Chrome（以及Edge、新版Firefox）的开发者工具能明确标出哪个元素创建了层叠上下文。
打开Elements面板，逐级点击目标元素的父节点，在右侧Layout标签页里找「Stacking Context」这一行——如果显示Yes，说明它就是层叠上下文根；显示No或不出现该字段，则没创建。
注意：Stacking Context字段只在元素满足触发条件时才出现，不是所有定位元素都有。比如position: relative + z-index: auto就不会触发，但position: relative + z-index: 0就会。
检查是否用了会隐式创建上下文的CSS属性
有些属性看着 harmless，却会悄悄建一个新上下文。只要元素上存在以下任一声明，它就大概率成了上下文根：
-
opacity值小于1（哪怕opacity: 0.999） -
transform值不是none（包括transform: translateZ(0)、scale(1)、rotate(0)） -
filter值不是none（哪怕filter: blur(0)或drop-shadow(none)） -
will-change设为transform、opacity等（即使没实际动画） isolation: isolate-
contain: layout、contain: paint或contain: strict
特别警惕那些“为了性能加的”transform: translateZ(0)或“为了过渡留的”opacity: 0.99——它们是线上环境最常埋雷的地方。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
用临时覆盖法快速验证可疑父元素
当你怀疑某个父容器是“隐形上下文制造者”，不用反复删代码，直接在DevTools Styles面板里手动覆盖：
- 加
z-index: auto !important（对已设z-index的定位元素） - 加
opacity: 1 !important（对透明度相关问题） - 加
transform: none !important（对动画/硬件加速残留） - 加
filter: none !important
改完立刻看遮挡是否消失。如果层级恢复正常，就坐实了它是上下文源头——接下来要么移除该属性，要么把需要“突围”的子元素（如弹窗、tooltip）用position: fixed提到body下，脱离这个上下文。
别信DOM顺序和z-index数值，先看上下文树
两个同级元素，一个z-index: 9999，另一个z-index: 1，但后者反而盖住前者？不是bug，是它们根本不在同一个上下文里。
浏览器渲染时，先按DOM顺序和上下文创建规则生成“上下文树”，再在每个上下文内部比z-index。所以：
- 父元素A（无上下文）里的子元素
z-index: 9999，永远压不过父元素B（有上下文且自身z-index: 2）里的子元素z-index: 1 -
z-index: auto和z-index: 0语义完全不同：auto不创建上下文，0会强制创建 - flex/grid容器的子元素只要设了
z-index（非auto），哪怕父容器没定位，也会自动生成上下文
真正要盯住的，从来不是子元素的z-index数字，而是它往上第一个Stacking Context: Yes的祖先是谁——那个才是决定它“活动范围”的天花板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
