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 只在该上下文中比较，无法越过父级和兄弟元素比高低。
z-index: 1，B 的 z-index: 2；即使 A 内部有个子元素 z-index: 999，它依然在 B 下面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 在控制台验证实际计算值以上就是css元素层级不正确怎么办_使用z index控制层叠顺序的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
464
收藏
