是，z-index 仅对定位元素生效；需先设 position: relative 等，再配 z-index；父容器也需参与层叠；复杂场景可用 isolation: isolate 或 position: fixed + inset 实现置顶。
用 z-index 无法直接控制 <img> 的层级？先确认父容器是否“参与层叠”
直接给 <img> 加 z-index 没反应，不是 bug，是 CSS 层叠规则限制：z-index 只对「定位元素」（position 值为 relative、absolute、fixed 或 sticky）生效。普通 <img> 默认是 static，z-index 被忽略。
实操建议：
- 给图片加
position: relative（最轻量，不改变布局），再设z-index: 10或更高 - 若图片在某个容器内（如
<div class="card">），该容器本身也需有定位（哪怕只是position: relative），否则子元素的z-index会受限于父层叠上下文 - 避免给多个同级图片都设高
z-index却不设position——它们仍按 HTML 顺序堆叠，z-index彻底无效
图片被遮挡但不想改 HTML 结构？用 isolation: isolate 创建新层叠上下文
当图片嵌套在复杂组件中（比如 Vue/React 组件、第三方 UI 库弹窗），父容器可能已建立层叠上下文，导致子图片的 z-index 被“截断”。这时强行提升 z-index 无效。
解决思路是主动创建独立层叠上下文：
立即学习“前端免费学习笔记（深入）”；
- 在图片或其直接父元素上加
isolation: isolate（现代浏览器支持良好） - 等效替代方案：用
transform: translateZ(0)或will-change: transform（兼容旧版 Chrome/Safari） - 注意：
opacity: 0.99也会触发新层叠上下文，但会意外改变透明度，慎用
示例：
<img src="logo.png" style="position: relative; z-index: 100; isolation: isolate;">
移动端 Safari 显示异常？检查 z-index 是否被 -webkit-overflow-scrolling: touch 干扰
iOS 15+ 之前，带 -webkit-overflow-scrolling: touch 的滚动容器（常见于老式模态框）会强制创建独立层叠上下文，且内部 z-index 行为不可预测——即使图片加了 position 和 z-index，也可能被容器内容盖住。
应对方式：
- 优先移除
-webkit-overflow-scrolling: touch（现代 iOS 已原生支持平滑滚动） - 若必须保留，把图片移出该滚动容器，用
position: fixed+top/left定位到视口指定位置 - 测试时务必真机验证，模拟器常无法复现该问题
需要绝对置顶且无视所有父级限制？用 position: fixed 配合 inset
当“最上层”意味着真正穿透所有 DOM 层级（包括全屏视频、WebGL canvas、系统级弹窗），z-index 已不够用，必须脱离文档流。
推荐写法（简洁且响应友好）：
-
position: fixed让图片脱离所有父容器约束 - 用
inset: 20px替代top/right/bottom/left四值（更易维护） - 搭配
z-index: 2147483647（CSS 最大整数）确保压倒一切，但通常9999已足够
示例：
<img src="badge.png" style="position: fixed; inset: 10px auto auto 10px; z-index: 9999;">
注意：这种方案会让图片随视口滚动而固定，如果业务要求“仅在某区域置顶”，仍应回归层叠上下文方案——强行 fixed 容易破坏可访问性与打印样式。
