z-index对阴影无效是因为box-shadow属于元素自身渲染层，受所在层叠上下文限制；若父容器触发新堆叠上下文（如opacity
z-index 为什么对阴影没用？
因为 box-shadow 是元素自身渲染的一部分，它不会脱离所在层叠上下文；如果父容器触发了新层叠上下文（比如加了 opacity: 0.99、transform: scale(1) 或 filter: blur(0)），阴影就被“关进房间”里了——哪怕子元素 z-index: 9999，也出不去。
常见现象：阴影明明写了，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); - 首层（最深）放大扩散阴影，末层（最浅）放反向偏移的高光，模拟真实光源
- 避免超过 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 比调大数字管用得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
