父容器 overflow: hidden 会裁剪脱离文档流的子元素，z-index 无效；应检查是否需该属性，改用 display: flow-root 或移出 DOM；同时注意层叠上下文对 z-index 的限制。
父容器 overflow: hidden 切掉子元素怎么办
这是最常见也最容易被忽略的遮挡原因：父容器设置了 overflow: hidden（或 auto / scroll），而子元素用 position: absolute 或 fixed 脱离文档流后，超出父容器边界的部分会被直接裁剪。
解决思路不是硬加 z-index——它根本不起作用，因为裁剪发生在绘制前，z-index 是层叠顺序，不改变裁剪行为。
- 检查父容器是否真需要
overflow: hidden；如果只是为了清除浮动，改用display: flow-root或伪元素::after更安全 - 若必须保留
overflow，把定位元素移出该父容器 DOM 结构，挂到更高层级（比如body下），再用 JS 动态计算位置 - 极少数场景可用
overflow: clip（Chrome 119+ 支持），它比hidden更语义化，但兼容性差，不能替代
z-index 不生效？先看是否在同一个层叠上下文里
z-index 只在「同一个层叠上下文」内起作用。父容器一旦设置了 position + z-index（哪怕值是 0）、opacity 小于 1、transform 非 none 等，就会创建新的层叠上下文——此时子元素的 z-index 只跟这个新上下文比，不会穿透出去和外部元素竞争。
- 用浏览器开发者工具的「Layers」面板或「Computed」标签页，查看目标元素的
stacking context是否被意外创建 - 临时移除父容器的
transform、filter、opacity等属性，确认是否是它们触发了层叠上下文 - 如果必须保留这些属性，那就得把整个「要浮上来」的模块（包括它的父容器）一起提升层叠等级，而不是只调子元素的
z-index
绝对定位元素被兄弟元素盖住，怎么调 z-index 顺序
当多个 position: relative/absolute 元素处于同一父容器内，且没有其他层叠上下文干扰时，z-index 才按数值大小直接生效。
立即学习“前端免费学习笔记（深入）”；
- 确保所有参与比较的元素都显式声明了
position（relative、absolute、fixed或sticky），否则z-index无效 - 避免使用过大的
z-index值（如9999），容易引发后续维护冲突；推荐按功能分层，比如z-index: 10（弹窗遮罩）、20（弹窗主体）、30（提示框） - 注意文档流顺序：同级元素中，后出现的默认层叠在前一个之上；
z-index是对这一默认行为的覆盖，不是绝对“最高”
移动端 Safari 中定位元素突然消失或错位
iOS Safari 对 position: fixed 和某些 transform 组合有特殊渲染限制，尤其在页面滚动或键盘弹出时，常表现为元素被截断、闪退、或脱离预期位置。
- 避免对
fixed元素同时设置transform: translateZ(0)或will-change: transform，这会触发 iOS 的独立合成层，反而导致定位失效 - 键盘唤起时，
fixed元素可能被视口重算影响；可监听resize事件，检测window.visualViewport高度变化后手动修正位置 - 用
position: sticky替代部分fixed场景（如吸顶导航），它更稳定，且不依赖视口坐标系
z-index 写多少，而是没意识到 overflow 裁剪和层叠上下文这两道隐形墙。调试时优先查父容器的 overflow 和触发层叠上下文的属性，比反复调 z-index 数值高效得多。 
