阴影被遮挡主因是父容器触发层叠上下文（如opacity、transform、filter），将阴影锁在局部“房间”内，即使z-index再高也无效；需检查layers面板确认上下文，移除相关属性或调整定位策略。
阴影被遮挡，不是 shadow 类没生效，而是它被其他元素盖住了——z-index 在这里根本没机会起作用，因为层叠上下文已经把阴影“关进小房间”了。
为什么 shadow 看不见？先查是不是被层叠上下文锁死了
阴影属于元素的视觉渲染层，但它依附于该元素所在的层叠上下文。一旦父容器触发了新上下文（比如加了 opacity、transform、filter 或 will-change），子元素的阴影就只能在这个“房间”里排队，再高的 z-index 也出不去。
- 打开 Chrome DevTools → Elements → 右键目标元素 → Reveal in Layers panel，看它是否被嵌套在某个“stacking context”里
- Computed 面板搜 stacking context，如果某个祖先节点显示 “This element establishes a stacking context”，就是它
- 临时删掉父级的
opacity: 0.99、transform: scale(1)或filter: blur(0)，观察阴影是否立刻出现
给卡片加 position: relative 是必要前提
z-index 对 position: static 元素完全无效，而 Tailwind 默认所有工具类都不改 position。不显式设定位，z-index 就是摆设。
- 必须搭配
relative（或absolute/fixed）才能激活z-index - 推荐优先用
relative：不脱离文档流，不影响布局，又能让z-index生效 - 错误写法：
class="shadow-lg z-10"→z-10被忽略；正确写法：class="relative z-10 shadow-lg"
移动端 hover 悬停时阴影消失？别硬撑，换思路
iOS Safari 和多数安卓 WebView 根本不触发 :hover，哪怕写了 @media (hover: hover)，微信内置浏览器等环境也会无视。靠媒体查询补救只会让逻辑变脆。
- 放弃
hover:shadow-xl作为唯一交互反馈，改用focus-within或点击态（active:scale-[0.98]）更可靠 - 若必须视觉提升，用
scale-[1.015]+origin-center，对布局影响小，且在无 hover 环境下仍可通过 focus 触发 - 不要给父容器加
overflow-hidden——Safari 会直接裁掉阴影区域，连 computed 样式都显示正常，但就是看不见
多卡片 Grid 布局中悬停被遮挡？align-self 是隐形陷阱
align-self: start 这类对齐属性会干扰层叠顺序，尤其在 Grid 中，它可能让卡片的渲染层低于兄弟元素，导致悬停时阴影被盖住，而不是 z-index 数值不够。
- 移除卡片上的
align-self-start或类似类，改用justify-items/align-items在容器层统一控制 - 确保所有卡片使用相同的定位策略（比如都加
relative），避免某些卡片因未定位而默认进入“auto 层” - 如果必须错位排版，用
mt-[-4px]替代align-self，它不触发新层叠上下文
真正卡住阴影的，往往不是数值大小，而是你没意识到那个 opacity: 0.99 的父容器已经悄悄建了一堵墙。查 Layers 面板比调 z-50 有用十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
