position: fixed 在 iOS Safari 早期版本（如 iOS 5 之前）中存在兼容性问题，主要表现为滚动时定位失效、元素随页面移动或高度计算异常；根本原因包括输入框获焦触发的渲染异常、父容器 overflow 创建新层叠上下文、以及 Safari 渲染机制对动态样式更新不敏感。
position: fixed 在移动设备上失效怎么办
直接说结论：position: fixed 在 iOS Safari 早期版本（position: absolute，尤其在页面滚动或键盘弹出时“粘不住”。这不是 bug，是浏览器渲染层对合成（compositing）的保守策略。
常见现象包括：顶部导航栏随页面滚动、底部操作栏被键盘顶起、z-index 失效导致遮挡异常。
- 必须加
transform: translateZ(0)或will-change: transform强制开启硬件加速（注意：这会创建新的 stacking context） - 避免在
fixed元素父级上使用transform、perspective或filter，否则会切断其与视口的绑定关系 - 在 iOS 上，
height: 100vh配合fixed可能因地址栏隐藏/显示而跳变，改用min-height: 100dvh（2023 年后支持）更可靠
z-index 层叠失效的真正原因不是“没写数字”
z-index 只在**定位元素**（position 值为 relative、absolute、fixed 或 sticky）上生效，但更隐蔽的问题是 stacking context 的嵌套。
CSS2 中 stacking context 规则较简单；CSS3 新增了多个触发条件，比如：opacity 、<code>transform 不为 none、filter、will-change、perspective 等——这些都会创建**独立的层叠上下文**，内部 z-index 仅在该上下文内有效。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否意外设置了
opacity: 0.99或transform: scale(1)，它们比z-index优先级更高 -
position: sticky是 CSS3 新增定位类型，它依赖父容器有明确的高度和滚动边界，且自身不触发新 stacking context（除非显式加了上述属性） - 调试技巧：在 DevTools 中选中元素，看 Styles 面板里
z-index是否被划掉（表示无效），再往上逐层检查 computed 的stacking context状态
sticky 定位不是“半吊子 fixed”，而是有严格触发条件
position: sticky 是 CSS3 新增的定位值，在兼容性足够（Chrome 56+、Firefox 54+、Safari 13.1+）的前提下，它表现得像 relative 和 fixed 的混合体，但行为完全由**滚动容器的边界和偏移值**决定。
关键点在于：它只在父容器可滚动（overflow: auto 或 scroll）、且元素本身处于滚动临界点时才“粘住”。一旦超出容器范围或父容器不可滚动，它就退回 relative 行为。
- 必须设置至少一个偏移属性（
top、bottom、left或right），只写position: sticky不生效 - 父容器不能是
display: flex或grid的直接子项并同时设align-items: stretch，这会破坏 sticky 的滚动锚点计算 - 在表格相关元素（
<thead>, <code><th>）中支持有限，Safari 对 <code><tr> 的 sticky 支持直到 2024 年才稳定 <h3>绝对定位元素的 containing block 在 CSS3 中变了</h3> <p>CSS2 规定 <code>position: absolute的 containing block 是“最近的已定位祖先元素”，但这个“已定位”只要position不是static就算——哪怕只是relative且没设偏移。CSS3 明确补充了例外：如果该祖先设置了transform、perspective或filter，它就成为新的 containing block，且该 block 的尺寸和原点会受这些属性影响。典型问题：给一个
relative父容器加了transform: rotate(0.1deg)（仅为触发硬件加速），结果内部absolute子元素的top: 0不再对齐父容器顶部，而是相对于旋转后的坐标系定位。- 不要为“优化性能”随意加无意义的
transform，尤其在布局容器上 - 若必须用
transform，且需保持 absolute 定位基准不变，可将该容器设为contain: layout paint（CSS Containment，2022 年起主流支持） - 用
getBoundingClientRect()调试时注意：它返回的是视口坐标，不是相对于 containing block 的坐标，容易误判
transform、will-change、contain这些看似无关的属性，全都在悄悄重定义“位置”的参照系。复杂布局出问题，八成不是写错了top，而是某个父级无意中切换了坐标系统。 - 不要为“优化性能”随意加无意义的
