CSS定位元素堆叠顺序：确保阴影不被覆盖

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，也无法突破这个限制。

常见现象是：阴影的样式在DevTools中显示为已生效，但在页面上却不可见。删除父级的一个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);
  • 首层（最深）放大扩散阴影，末层（最浅）放置反向偏移的高光，模拟真实光源
  • 避免超过3层——真机渲染可能降级，尤其低端安卓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，这才是关键。