z-index不生效主因是未建立层叠上下文：需为元素设relative/absolute/fixed定位，避免overflow-hidden干扰，注意mix-blend-mode等隐式创建层叠上下文，tailwind z值需手动扩展，absolute定位更可控但父容器须relative。
z-index 不生效？先确认定位上下文和层叠上下文
写 z-20 却盖不住兄弟元素，大概率不是数值不够大，而是没建立有效的层叠上下文。Tailwind 的 z- 系列类只在已定位元素（position 不为 static）上生效。光加 z-10 没用，必须搭配 relative、absolute 或 fixed。
常见错误现象：
- 父容器用了
overflow-hidden，子元素即使z-50也被裁剪，视觉上“消失” - 嵌套弹窗里下拉菜单被盖住，其实是外层弹窗创建了新的 stacking context，内部
z-50只相对于该弹窗有效，而非全局 - 用了
mix-blend-mode或opacity: 0.99，也会隐式创建 stacking context，打乱原有层级
实操建议：
- 所有需要参与堆叠的元素，至少加
relative（哪怕不偏移） - 避免在父级盲目加
overflow-hidden；如需裁剪，改用mask或伪元素模拟 - 调试时打开 DevTools 的 Layers 面板，确认 stacking context 是否按预期分层
负边距重叠后点击错位？z-index 和定位必须同步配对
用 mt-[-16px] 把卡片标题拉上来盖住图片，结果点不到标题——这不是 bug，是浏览器默认仍按原始文档流分配点击区域。负边距只改变视觉位置，不改变层叠顺序或交互热区。
必须显式控制两件事：
- 上层元素加
relative z-10（不能只加z-10） - 下层元素加
relative z-0（明确设低层级，别依赖默认值） - 如果父容器有
z-20，而你只写z-10，那它照样被盖住——z-是相对最近定位祖先计算的
注意：Tailwind 默认 z- 最高只到 z-50，复杂嵌套中常不够用。需在 tailwind.config.js 中扩展：theme.extend.zIndex 加入 '60': '60', '70': '70' 等。
absolute 定位重叠比负边距更可控，但父容器必须带 relative
想让图标精准贴在卡片右上角？别用 mr-[-8px] mt-[-8px]，它依赖元素自身尺寸，响应式下容易穿帮。改用 absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 更稳。
但这个组合生效的前提只有一个：父容器必须有 relative。否则 absolute 会相对于 body 定位，一滚动就飘走。
容易踩的坑：
- 父容器是
flex或grid，却忘了加relative—— 容器类型和定位是正交属性，互不替代 - 用
top-[-8px]替代-translate-y-1/2：前者是固定像素偏移，后者自动适配元素高度，在字体缩放或动态内容下更鲁棒 - 响应式断点里混用
sm:top-0 md:top-[-4px]：小屏偏移量可能过大，优先用transform类
backdrop-blur + 堆叠卡片失效？背后内容被裁或没透出
写了 backdrop-blur-md bg-white/10 却像没加，八成是 backdrop 采样区域为空。backdrop 模糊不是“模糊自己”，而是模糊“自己背后的画面”。如果背后是纯色、空白或被 overflow-hidden 截断，那就什么也模糊不了。
关键检查点：
- 堆叠容器不能是空的
div，背后得有真实内容（比如 body 背景、滚动区域、或一张底图） - 删掉所有父级的
overflow-hidden；如需圆角裁剪，用rounded-xl+bg-clip-padding替代 - Safari 必须补
-webkit-backdrop-filter: blur(8px)，且数值要和backdrop-blur-md一致（默认 md=8px） - 微信 X5 内核完全不支持，fallback 推荐
bg-black/5 blur-sm（作用于自身），别用filter: blur()配合透明背景
最易忽略的一点：多个玻璃卡片堆叠时，每张都得带半透明背景（如 bg-white/10），纯白或不透明背景会直接挡住背后的模糊采样源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
