position: sticky 在 safari 15.4 前及 chrome 56 前完全不支持，需设最近滚动祖先的 height 或 overflow；ios safari 不支持 table 子元素；transform/filter 等会禁用 sticky；ie/旧 edge 中 z-index 因层叠上下文异常失效。
position: sticky 在 Safari 和旧版 Chrome 中不生效
直接失效，不是偏移不准，而是完全当 position: static 处理。Safari 15.4 之前、Chrome 56 之前默认不支持，且无法通过前缀修复。
- 必须给粘性元素的**最近滚动祖先**显式设置
height或overflow: auto/scroll，否则 Safari 可能连触发都不触发 - iOS Safari 对
<table> 子元素（<code><td>、<code><th>）完全无视 <code>position: sticky，只能换用position: absolute+ JS 动态计算位置 - 父容器若含
transform、perspective或filter（非none），会创建新层叠上下文并“禁用” sticky —— 这在 Chrome/Firefox 中也发生，但 Safari 更敏感，有时仅transform: translateZ(0)就够 - IE10–11 和 Edge 17 前，
opacity 、<code>transform、will-change都会意外创建隔离上下文，把弹窗压到下面 - IE 不识别
z-index: auto，所有auto都被当作0；若父元素没设position（如relative），子元素的z-index直接被忽略 - 避免在 IE 场景中混用
transform: translateZ(0)和z-index，它可能让本该顶层的浮层突然沉底 - 不要对
或设置height: 100%或overflow: hidden，这会让 iOS 认为视口不可滚动，破坏 fixed 锚点 - 避免在 fixed 元素上同时使用
transform（哪怕只是translateZ(0)），否则某些安卓 WebView 或旧 iOS 版本会使其退化为 relative 定位 - 微信内置浏览器、部分安卓 4.4 系统浏览器对 fixed 支持不完整，建议关键区域用 JS 模拟：监听
scroll事件 + 动态更新top/left - Flex/Grid 容器本身不自动成为 absolute 元素的包含块，除非显式设
position: relative - IE10–11 对 Grid 容器内 absolute 元素的定位基准常取文档根而非父容器，加一层
position: relative能强制修正 - Firefox 早期版本对
align-items: center下的 absolute 元素 top 计算有偏差，建议用top: 50%+transform: translateY(-50%)替代纯top
z-index 在 IE/旧 Edge 中遮挡异常
不是层级数值设小了，而是层叠上下文（stacking context）生成规则不同，导致 z-index 被忽略或错乱。
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
position: fixed 在 iOS Safari 中跳变或错位
不是样式写错了，是系统级限制：地址栏收起/键盘弹出/横竖屏切换时，fixed 元素会瞬间失准，甚至固定到错误坐标。
absolute 在 Flex/Grid 容器中定位基准不一致
旧版浏览器（如 Safari 9、Chrome 48）对“包含块（containing block）”的判定逻辑和现代标准不一致，导致 absolute 元素偏移起点错乱。
position 值毫无意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
