z-index不生效主因是父容器创建了新层叠上下文；常见诱因包括opacity<1、transform非none、filter等；需配合position使用，推荐整数分层管理并协同box-shadow设计。
z-index 不生效？先确认父容器是否创建了新的层叠上下文
移动端 CSS 阴影层叠效果出不来，90% 是因为 z-index 被“锁住”了——它的父元素无意中触发了层叠上下文（stacking context），导致子元素的 z-index 只在该上下文内生效，无法和兄弟容器竞争。
常见诱因包括：opacity 小于 1、transform 非 none、filter、will-change、isolation: isolate，以及 iOS Safari 中某些 position: fixed 组合。
- 检查阴影层（比如弹窗）的直接父容器是否用了
transform: translateZ(0)或opacity: 0.99—— 这些会静默创建新层叠上下文 - 若必须用
transform做动画，改用translateX/Y，避免translateZ或scaleZ - 临时调试可加
outline: 1px solid red确认实际参与层叠的容器边界
阴影层叠顺序混乱？用整数 z-index + 显式定位组合控制
移动端浏览器（尤其旧版 iOS WebKit）对非整数或过大的 z-index 值处理不稳定。别依赖 z-index: 9999 或 z-index: 100000，更别用小数。
-
z-index必须配合position: relative、absolute或fixed才生效，只写z-index没用 - 推荐分层管理：底部内容
z-index: 1，遮罩层z-index: 10，弹窗主体z-index: 20，顶部提示条z-index: 30 - 避免跨模块硬编码值，用 CSS 自定义属性统一管理：
--z-modal: 20; --z-overlay: 10;
阴影看起来“浮不起来”？box-shadow 和 z-index 要协同设计
box-shadow 本身不改变层级，它只是绘制效果；真正决定“谁压谁”的是 z-index。但阴影视觉深度感差，常被误认为层级没起作用。
立即学习“前端免费学习笔记（深入）”；
- 移动端建议用偏移 + 模糊组合：
box-shadow: 0 4px 12px rgba(0,0,0,0.15)，避免大扩散值（如0 0 30px）在高 DPR 屏上发虚 - 若阴影被父容器裁切，检查父元素是否有
overflow: hidden—— 弹窗类组件应设为overflow: visible或用clip-path: none - iOS Safari 对
box-shadow的硬件加速支持较弱，慎用inset阴影叠加多层
真机测试时阴影错位或消失？留意 viewport 和缩放干预
部分安卓 WebView 或 iOS 微信内置浏览器会在页面缩放后重排层叠关系，导致阴影层脱离预期位置，甚至渲染异常。
- 确保
<meta name="viewport">中不含user-scalable=yes，或 JS 主动禁用双指缩放：document.documentElement.style.touchAction = 'pan-x pan-y'; - 阴影元素若使用
position: fixed，需额外加backface-visibility: hidden防止 iOS 渲染撕裂 - 微信环境里，
z-index在position: fixed+transform组合下极易失效，优先用position: absolute+top: env(safe-area-inset-top)替代
层叠不是数字越大越稳，而是每个节点是否在正确的上下文里说话。移动端最麻烦的从来不是写多少 z-index，而是搞清哪一层先“闭嘴”了。
