z-index不生效主因是元素未定位，需设position: relative/absolute/fixed；其次受层叠上下文限制，父级transform、opacity等会创建新上下文，子元素z-index仅在该上下文中有效。
hover时z-index不生效？先确认元素是否真正定位
写了 z-index: 100 却没反应，90% 是因为元素还处于 position: static 状态——z-index 对它完全无效。浏览器里打开开发者工具，选中元素，看 Computed 面板里的 position 值是不是你预期的 relative、absolute 或 fixed；如果是 static，哪怕 z-index 写成 999999 也白搭。
常见误操作包括：
- 只加
z-index: 10，漏掉position: relative - 给子元素设
absolute，但父容器没设position: relative→ 子元素会相对视口定位，z-index在错误上下文中比较 - 用 Flex 容器当“定位基座”，却忘了 Flex 本身不创建层叠上下文，必须显式加
position: relative
:hover触发的层级变化，受限于父级层叠上下文
z-index 不是全局排序器，它只在**同一个层叠上下文内**起作用。如果父容器设置了 transform: translateZ(0)、opacity: 0.99 或 filter: blur(1px)，就会隐式创建新层叠上下文——这时子元素再怎么调高 z-index，也盖不过同级兄弟容器里的低数值元素。
排查方法：
- Chrome 开发者工具中打开
Layers面板，看目标元素是否被包裹在独立的 “Stacking Context” 里 - 检查父级是否意外带了
will-change、clip-path或mask等属性 - 若需跨容器控层，优先提升共同祖先的
z-index，而不是硬调子元素
纯CSS下拉/遮罩类hover效果，z-index配比要留出安全余量
下拉菜单、图片遮罩、提示气泡这类 hover 触发的浮层，不能靠堆数字赌运气。一个被反复验证的区间配比是：
- 基础内容层：
z-index: 0–9（卡片、文字、普通按钮） - 浮层层：
z-index: 100–199（下拉菜单、hover遮罩、Tooltip） - 强弹窗层：
z-index: 200–299（模态框、全屏 Toast）
关键点：
- 触发容器（如
.dropdown）只设position: relative，**不要设z-index** —— 否则它会变成子菜单的“天花板”，子菜单再高也出不去 - 遮罩层若用伪元素实现，记得加
pointer-events: none，否则鼠标悬停在遮罩上就中断了.container:hover状态 - 避免
z-index: -1：它会让元素沉到背景层之下，连父容器的背景色都可能盖过它
hover阴影被裁切？不是z-index问题，是overflow或定位基准错了
box-shadow 本身不参与层叠上下文，但它会被父容器的 overflow: hidden 直接裁掉，也会因绝对定位参考错乱而偏移出界。比如导航栏卡片常设 overflow: hidden 防圆角溢出，结果 hover 阴影刚出来就被砍了一半。
解决路径很直接：
- 检查目标元素的**所有上级容器**，逐层确认有没有
overflow: hidden或overflow: clip - 确保父容器有
position: relative，否则box-shadow的绘制区域可能随文档流漂移 - 想要纯底部阴影？写成
box-shadow: 0 8px 12px -4px rgba(0,0,0,0.2)——offset-y为正、spread-radius为负，比调z-index更治本
真正容易被忽略的是：层叠上下文一旦创建，就不可逆；你没法用子元素的 z-index “穿透”出去。所以 hover 效果出不来时，别急着改数字，先用 Layers 面板看一眼上下文树——那里藏着绝大多数“为什么没反应”的答案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
