在网页布局中，我们经常会遇到这样一种情况：给某个元素设置了很大的z-index数值，比如9999，但它依然被另一个看起来层级更低的元素遮挡。很多初学者会以为这是浏览器的渲染异常，实际上这背后有一套明确的CSS层叠规则。理解这些规则，是排查显示层级问题的关键。
层叠上下文是如何被创建的
层叠上下文是HTML元素在三维空间中的一种抽象概念，它决定了元素及其子元素在Z轴上的排列顺序。最常见的创建方式是给元素设置position值为relative、absolute或fixed，并且同时赋予非auto的z-index。此时该元素就成为层叠上下文的根，其内部所有子元素的层级比较都被限制在这个上下文里。
除了传统的定位加z-index方式，现代CSS中许多属性也会无意间创建层叠上下文。例如opacity小于1、transform值不为none、filter不为none、will-change指定了上述属性、flex或grid容器的子项设置了z-index等。这意味着即便你没有写position，只要用了transform: translate(0)，这个元素就已经是一个独立的层叠上下文了。
当多个层叠上下文在页面中平级存在时，它们的层级高低由各自根元素的z-index决定；如果都没有z-index，则按文档流顺序和特定规则排列。这就解释了为什么子元素设了再大的z-index，也无法盖住另一个层叠上下文里的元素，因为它们根本不在同一个比较空间内。
position与z-index的配合误区
不少开发者误以为z-index可以单独生效，实际上对于position为static的默认元素，z-index是被完全忽略的。也就是说，如果你没有把元素变成相对、绝对或固定定位，写多少z-index都不会改变它的堆叠位置。这是一个最基础的失效原因。
另一个常见错误是混淆父子层叠上下文。假设父容器A设置了opacity: 0.9从而创建了层叠上下文，子元素B设置了z-index: 100。此时页面上还有一个兄弟容器C，z-index为10。由于A的层级由自身决定（若A无z-index则按序排列），B的100只在A内部有效，最终C仍可能覆盖整个A包括B。下面这段代码演示了这种现象：
<div class="parent" style="opacity:0.9; position:relative;"> <div class="child" style="position:absolute; z-index:100; background:red;">子元素</div> </div> <div class="sibling" style="position:relative; z-index:10; background:blue; margin-top:-20px;">兄弟元素</div>
在上面的例子中，虽然child的z-index是100，但parent因为opacity小于1已经形成层叠上下文，其整体层级受parent影响，sibling以自身z-index:10在外部上下文中比较，就可能压在parent之上。要修复这类问题，需要提升parent本身的层级，而不是只改子元素。
其他导致层级异常的属性与排查思路
除了定位和透明度，transform和filter也是隐蔽的层叠上下文制造者。比如为了做动画给元素加了transform: scale(1)，它本身没有视觉变化，却足以让元素变成新上下文，导致内部弹窗无法超出外部容器遮挡。这种问题在组件库中尤为常见，因为很多组件默认带transform居中。
排查时建议先用浏览器开发者工具查看元素是否带有层叠上下文标记，并逐级检查父链上的opacity、transform、filter、position与z-index。可以临时去掉这些属性观察层级变化。此外，避免滥用超高z-index，采用合理的上下文结构，比如将需要置顶的弹窗直接挂载到body下，能有效绕开父级上下文限制。
最后要注意，z-index仅对定位元素或flex、grid子项有意义，且比较范围严格限制在所属层叠上下文内。理清文档流、定位方式与上下文边界，才能彻底解决CSS层级失效的困扰。书写Windows路径调试样式表时如C:\Users\Admin\style.css，也要确保文件正确加载，避免样式未生效造成的误判。