实际上，z-index无法控制阴影的层级，其根本原因在于box-shadow属于元素自身的渲染层，受到所在层叠上下文的限制。一旦父容器建立了新的堆叠上下文（例如设置了opacity小于1、transform、filter等属性），阴影就会被“关”在这个上下文内部，无论如何调整z-index都无法突破。
z-index 为什么对阴影没用？
这是因为box-shadow是元素自身渲染的一部分，并不会脱离其所在的层叠上下文。如果父容器触发了新的层叠上下文——例如添加了opacity: 0.99、transform: scale(1)或filter: blur(0)——阴影就会被“关进房间”里。即使子元素设置了z-index: 9999，也无法突破父级的限制。
常见现象是：明明在CSS中写了阴影，DevTools的computed样式也显示生效，但页面上却看不到。有时只需要删除父级的一个will-change: transform，阴影就会立刻出现。那么，如何排查这类问题呢？
- 打开Chrome DevTools → Elements面板 → 右键目标元素 → Reveal in Layers panel，查看该元素是否嵌套在某个stacking context“房间”中。
- 在Computed标签页搜索
stacking context，第一个标注有“This element establishes a stacking context”的祖先元素就是问题源头。 - 临时将目标元素剪切出来挂到
下，验证问题是否确实由父级层叠上下文导致。
shadow 被盖住，先检查 position 和 z-index 组合
z-index对position: static的元素完全无效，而Tailwind或纯CSS默认情况下不会改变position属性。如果不显式设置定位，z-index就不会生效。举个例子：
- 错误写法：
class="shadow-lg z-10"→z-10会被忽略 - 正确写法：
class="relative z-10 shadow-lg"（relative不脱离文档流，是最安全的选择） - 如果使用
absolute或fixed，请确保其最近已定位的祖先没有设置较低的z-index，否则整个子树都会被压住
多层 box-shadow 怎么写才不互相吃掉？
多层box-shadow并不是“层数越多深度越强”，而是按照声明顺序从后往前堆叠：第一个阴影位于最底层，最后一个位于最顶层。如果顺序颠倒，高光就会覆盖投影，导致立体感消失。
- 推荐写法：
box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.05), 0 -2px 4px rgba(255,255,255,0.8); - 首层（深度最大）放置扩散阴影，末层（深度最浅）放置反向偏移的高光，以此模拟真实光源效果
- 避免超过三层，因为在真机渲染时可能会出现降级，尤其是在低端安卓WebView中
overflow: hidden 会直接裁掉阴影
overflow: hidden（以及auto、scroll）会在绘制前裁剪内容区域，此时box-shadow尚未进入层叠计算阶段，因此z-index完全无效。
- 在Safari中尤为明显：computed样式一切正常，但阴影就是不显示
- 避免给卡片父容器添加
overflow-hidden，改用padding+border-radius来控制视觉边界 - 如果必须进行裁剪，可以将阴影移到伪元素上：使用
::after设置position: absolute+box-shadow，并确保父容器overflow: visible
真正导致阴影被遮挡的，往往不是z-index数值不够大，而是某个父级元素悄悄创建了一个层叠上下文“房间”将其锁住。与其盲目增加数值，不如检查一下stacking context，那才是解决问题的关键。
