z-index不生效主因是元素未参与层叠上下文：需确保position为relative/absolute/fixed/sticky，且父容器未意外创建新层叠上下文（如含transform、opacity等），同一上下文中z-index才按数值大小决定覆盖顺序。
z-index 不生效？先确认元素是否“参与层叠上下文”
直接给元素加 z-index 却没反应，大概率是因为它没进入层叠上下文（stacking context）。z-index 只对「定位元素」（position 值为 relative、absolute、fixed 或 sticky）有效，对 static 元素完全无效。
- 检查目标元素的
position是否被设为static（默认值），如果是，必须显式改写，例如：position: relative; - 父容器若设置了
transform、opacity、filter、will-change等属性，会隐式创建新的层叠上下文——此时子元素的z-index只在该父容器内部生效，无法越过父级去和外部兄弟元素比高低 - 避免滥用
z-index: 9999；优先用小范围整数（如1、2、10），靠结构和上下文控制层级，更易维护
同一层叠上下文中，z-index 数值决定前后顺序
当多个元素处于同一个层叠上下文且都已定位，z-index 就是决定谁在前、谁在后的直接依据：数值大的盖在数值小的上面，负值也合法（如 z-index: -1 会沉到父容器背景之下）。
-
z-index只接受整数，不支持auto以外的关键词（auto表示不创建新层叠上下文，沿用父级） - 未设置
z-index的定位元素，默认按 HTML 文档流顺序堆叠（后出现的元素自然盖在先出现的上面） - 注意：
z-index: 0和没写z-index效果不同——前者明确创建了层叠级别，后者仍属“默认层叠组”，可能在某些嵌套结构中表现不一致
用 position + z-index 实现常见覆盖效果（如弹窗、下拉菜单）
实际开发中，覆盖类组件（modal、tooltip、select dropdown）必须脱离文档流并可控层级。关键是两步：脱离流 + 显式层级。
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000; /* 确保高于页面其他内容 */
}
<p>.dropdown-menu {
position: absolute;
z-index: 101; /<em> 高于导航栏（z-index: 100），但低于 modal </em>/
}</p>-
fixed或absolute是常用选择；relative适合微调自身位置而不影响布局，但不能真正“浮起”覆盖其他区块 - 推荐为不同组件类型预设
z-index范围（如 header: 100, dropdown: 101–109, toast: 200, modal: 1000），避免后期冲突 - 不要依赖浏览器默认的层叠顺序来“碰运气”——比如假设
<div>一定在<span>上面，这不可靠
调试层叠问题：用浏览器开发者工具看真实堆叠顺序
Chrome / Edge / Firefox 的 Elements 面板里，选中元素后，在 Styles 标签页下方能看到「Computed」→「Stacking context」，点开可查看该元素是否创建了新上下文，以及它的层叠层级路径。
立即学习“前端免费学习笔记（深入）”；
- 快捷技巧：在 Elements 面板中右键元素 → «Reveal in Layers panel»（Chrome），能直观看到所有层叠上下文的嵌套关系和绘制顺序
- 如果两个元素看似同级却无法覆盖，检查它们是否意外被某个父容器（比如带
opacity: 0.99的 wrapper）隔离到了不同层叠上下文中 - 移动端要注意：
position: sticky在某些 iOS Safari 版本中会触发隐式层叠上下文，导致内部z-index失效
层叠不是简单调个数字就能解决的事，真正卡住的时候，八成是上下文断开了。盯着 position 和父级样式，比狂加 z-index 有用得多。
