z-index仅对定位元素生效，未定位或陷入父级层叠上下文会导致失效；需先设position（如relative），再设z-index；避免滥用超大值，推荐按功能分层设定合理范围。
z-index 只对定位元素（即 position 值为 relative、absolute、fixed 或 sticky）生效。如果元素层级没反应，大概率是它没定位，或者被父级的层叠上下文截断了。
确保元素已定位
给目标元素加上 position: relative;（最常用且不影响布局）或其它定位方式，再设置 z-index：
-
✅ 正确写法：
div { position: relative; z-index: 10; } -
❌ 无效写法：
div { z-index: 10; }（无 position，z-index 被忽略）
检查是否陷入父级层叠上下文
当某个父元素设置了 position + z-index（且值不为 auto），它就会创建新的层叠上下文。子元素的 z-index 只在该上下文中比较，无法越过父级和兄弟元素比高低。
- 比如：A 和 B 是同级容器，A 的
z-index: 1，B 的z-index: 2；即使 A 内部有个子元素z-index: 999，它依然在 B 下面 - 解决办法：把需要“浮出来”的元素移到更高层的容器中，或调整父级的
z-index层级关系
避免 z-index 值混乱
不要随意用超大数字（如 9999、999999），容易后期失控。推荐按功能分层设定合理范围：
立即学习“前端免费学习笔记（深入）”；
- 模态框遮罩层：
z-index: 1000 - 模态框主体：
z-index: 1010 - 顶部导航栏：
z-index: 100 - 普通悬浮提示：
z-index: 200
调试小技巧
浏览器开发者工具中，选中元素后在“Computed”面板查看 z-index 是否生效，同时留意 position 和 transform（后者也会隐式创建层叠上下文）。
- 临时加
outline: 2px solid red;快速确认是否选中目标元素 - 用
getComputedStyle(el).zIndex在控制台验证实际计算值
