position: sticky 在 Safari 15.4 前、Chrome 56 前不生效，需设最近滚动祖先高度或 overflow；iOS Safari 中对 table 子元素无效；父容器含 transform/perspective/filter 会禁用 sticky；z-index 在 IE/旧 Edge 中因层叠上下文判断差异导致遮挡异常；iOS Safari 中 fixed 元素存在跳变、缩放失真等问题；absolute 在 Flex/Grid 容器中旧版浏览器包含块判定不一，建议显式设 position: relative。
position: sticky 在 Safari 和旧版 Chrome 中不生效
这是最常见的 position: sticky 兼容性问题。Safari 15.4 之前、Chrome 56 之前，或未开启某些实验性标志时，sticky 会被直接忽略，退化为 static。
- 必须给粘性元素的**最近滚动祖先**设置明确的高度或
overflow: auto/scroll，否则 Safari 可能完全不触发 - 在 iOS Safari 中，
position: sticky对table子元素（如、 ）完全无效，需改用 position: absolute+ JS 模拟- 如果父容器用了
transform、perspective或filter，会创建新的层叠上下文并“禁用” sticky 行为 —— 这在 Chrome 和 Firefox 中一致，但 Safari 更敏感z-index 在 IE 和老 Edge 中的分层异常
z-index的层级计算依赖层叠上下文（stacking context），而 IE10–11 和 Edge 17 前对opacity、transform、will-change创建上下文的判断与现代浏览器不一致，导致预期外的遮挡。- IE 不识别
z-index为auto的元素参与层叠排序，所有auto都被当作0处理 - 若父元素没有
position（即非relative/absolute等），其子元素设了z-index，IE 会直接忽略 —— 而 Chrome/Firefox 仍按文档流顺序渲染 - 避免在 IE 场景中混合使用
transform: translateZ(0)和z-index，它可能意外创建隔离上下文，把本该在顶层的弹窗压到下面
fixed 定位在 iOS Safari 中“跳变”或脱离视口
iOS Safari（尤其 15.x–16.x）对
position: fixed的实现有特殊限制：当页面存在输入框聚焦、地址栏收起/展开、横竖屏切换时，fixed元素可能瞬间偏移、缩放失真，甚至固定到错误坐标。- 不要对
或设置height: 100%或overflow: hidden，这会让 iOS 认为视口不可滚动，进而破坏fixed锚点 - 避免在
fixed元素上同时使用transform（如scale或translate3d），iOS 渲染管线会将其降级为合成层，失去与视口的绑定 - 若需兼容 iOS 15+ 的地址栏自动隐藏行为，可监听
resize事件，用window.visualViewport?.offsetTop动态修正top值
absolute 定位在 Flex/Grid 容器中的基准差异
当
position: absolute元素的父容器是display: flex或display: grid时，不同浏览器对“包含块（containing block）”的判定曾有分歧：Firefox 早期版本以 flex/grid 容器为包含块，而 Chrome 一度以最近的position: relative祖先为准。立即学习“前端免费学习笔记（深入）”；
- 现代浏览器（Chrome 89+、Firefox 85+、Safari 14.1+）已统一：绝对定位元素的包含块就是其**最近的具有定位属性（
position≠static）的祖先**，与父容器是否为 Flex/Grid 无关 - 但若你没显式给 flex 容器加
position: relative，而只依赖其display: flex，那在旧版浏览器中它的子元素absolute可能相对于定位 —— 这不是 bug，是规范未明确前的实现差异 - 最稳妥写法：
.container { display: flex; position: relative; /* 显式声明，消除歧义 */ } .child { position: absolute; top: 10px; right: 10px; }
实际项目里，兼容性问题往往不出现在单一属性上，而是多个定位规则叠加后，在某个浏览器中某次滚动、缩放或聚焦时才暴露。建议在真实设备（尤其是旧款 iPad 和 iPhone）上验证，别只信 CanIUse 的绿色勾。
- 如果父容器用了
