safari中z-index失效主因是position未设为relative/absolute/fixed/sticky，或父级触发了层叠上下文隔离；需用devtools检查computed面板的position值和stacking context标记。
z-index在Safari里失效，先查是否漏了position
很多“跨浏览器z-index异常”根本不是浏览器差异，而是Safari对position: static更严格——它会直接忽略z-index，连计算样式里都不显示该值。Chrome有时会“宽容”地保留z-index的声明，但不生效，容易误导你。
- 用DevTools的Computed面板检查目标元素，确认
position值是relative、absolute、fixed或sticky，不是static（哪怕只差一个分号写成position: relative;后多加了个空格，某些旧版Safari也会回退到static） - 动态插入的元素（如JS创建的tooltip），务必同步设置
position: relative，不能只靠CSS类；否则Safari可能在渲染完成前就按static处理 -
position: sticky在Safari中行为不稳定：超出滚动容器时会退化为relative，此时若父容器没设z-index，整个sticky块就失去层级控制权
opacity或transform导致Chrome正常、Safari被盖住
opacity: 0.99和transform: translateZ(0)在所有现代浏览器里都会触发新层叠上下文，但Safari对上下文边界的判定更敏感——尤其当两个竞争元素的父级都触发了上下文，而它们的根节点z-index值相等时，Safari倾向于按DOM顺序渲染，Chrome则可能按paint顺序微调。
- 在Safari的Elements面板中，逐级点击父元素，看右侧面板Computed → “Stacking context”是否为“Yes”；重点盯
opacity小于1、transform非none、filter非none的父节点 - 临时注释掉
opacity或改用rgba(0,0,0,0.99)（不触发上下文），观察遮挡是否消失；若恢复后仍需透明效果，就在该父容器上显式加z-index: 0，把它变成可参与外层比较的上下文根 - 避免在滚动容器（如
overflow: scroll）上同时用transform和z-index：Safari可能将整个滚动区域提升为独立上下文，导致内部弹窗无法突破
iframe或video在旧版Safari中天然高于z-index
在Safari 15及更早版本中，<iframe></iframe>、<video></video>、<select></select>属于“插件窗口层”，渲染优先级硬编码在WebKit底层，z-index完全无效。这不是bug，是历史兼容策略。
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
- 检查页面是否嵌入了YouTube或 Vimeo 的
<iframe></iframe>，或使用了<video></video>全屏API；即使z-index: 99999也压不住它们 - 临时方案：给
<iframe></iframe>加visibility: hidden或display: none（需JS控制开关），再显示遮罩层；不要依赖z-index硬刚 - 若必须重叠，考虑用
iframe的allow="fullscreen; clipboard-write"配合document.fullscreenElement监听，在全屏退出后再恢复UI层级
同一父容器下z-index数值大却失效
当两个兄弟元素同属一个定位父容器（如都设了position: absolute），且父容器已创建层叠上下文（比如用了transform: scale(1)），那它们的z-index只在该父容器内比大小——但如果父容器本身z-index是auto，它在外部上下文中的层级就是0，可能被隔壁z-index: 1的header整体压住。
- 打开Chrome DevTools的Layers面板（或Safari的3D View），看两个元素是否真的处于同一层叠上下文树中；如果分支不同，说明中间有“隔离父级”
- 不要只调子元素的
z-index，优先给它们共同的最近祖先容器设position: relative+ 显式z-index（比如z-index: 100），让它成为可比较的上下文根 - 避免嵌套多层
z-index：比如.modal → .overlay → .content → .button，每层都设z-index，极易失控；应统一在.modal一级设高值，子元素用z-index: auto或默认流
真正卡住的点往往不在z-index值本身，而在你没意识到哪个父元素悄悄成了“上下文关卡”。浏览器不会报错，只会安静地按规则渲染——所以别猜，直接开DevTools看“Stacking context”标记。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
