多个 position: fixed 元素重叠需显式设置 z-index 控制层叠顺序，避免全局滥用；横向排列宜用 flex 容器包裹再 fixed；移动端需加 transform: translateZ(0) 修复闪动，禁用 height: 100vh；复杂交互场景才用 JS 模拟 fixed。
多个 position: fixed 元素重叠怎么办
默认情况下，所有 position: fixed 元素都相对于视口定位，彼此不感知，容易堆在同一个左上角或相互遮挡。这不是 bug，是规范行为——它们脱离了普通文档流，z 轴顺序只看 z-index 和声明顺序。
- 必须显式设置
z-index控制层叠，否则按 HTML 书写顺序：后写的盖前面的 -
z-index只对「已定位元素」（即position不是static）生效，别漏写position: fixed - 避免全局设
z-index: 9999，不同功能模块用语义化层级，比如导航栏z-index: 100、弹窗z-index: 1000、提示条z-index: 90
固定元素之间要留空隙或对齐，怎么算 left/top 值
不能靠 margin 或 flex 自动计算，因为 position: fixed 元素不参与布局计算。left/top 必须手动指定数值，或用 CSS 计算函数 calc() 动态处理。
- 横向排列多个按钮？用
left: calc(20px + 60px * n)（n 为索引）不如改用display: flex包一层容器再 fixed —— 容器 fixed，子元素用 relative 或 static 排列更可控 - 右侧固定工具栏想紧贴右边界？用
right: 20px比left: calc(100% - 60px)更稳，后者受滚动条宽度影响 - 顶部导航和底部操作栏之间留出内容区？别只 fixed 两者，要在
body上加padding-top和padding-bottom，否则内容会被遮住
移动端 fixed 元素“闪动”或“错位”怎么修
iOS Safari 和部分安卓 WebView 对 position: fixed 的实现有兼容性问题，尤其在页面缩放、键盘弹出、滚动时，常见表现为位置偏移、闪烁、甚至退化为 position: absolute 行为。
- 给 fixed 元素加
transform: translateZ(0)或will-change: transform，强制触发 GPU 加速，多数情况能稳住位置 - 避免在 fixed 元素内使用
height: 100vh—— 移动端地址栏收放会改变vh值，导致高度跳变；改用min-height: 100vh或 JS 动态设高度 - 键盘弹出时，iOS 会重置 viewport 高度，fixed 元素可能被顶上去；监听
focus事件临时切为position: absolute，blur 后恢复
要不要用 JS 监听 scroll 来模拟 fixed 效果
纯 CSS position: fixed 够用就别上 JS。但遇到「只在某段区域 fixed」「要跟随滚动微调位置」等需求时，JS 是唯一解法，不过代价是性能和复杂度。
立即学习“前端免费学习笔记（深入）”；
- 滚动中频繁修改
top会触发重排，务必用requestAnimationFrame节流，别直接写在scroll事件里 - 用
getBoundingClientRect()判断元素是否进入/离开目标区域，比监听 scrollTop + 手动算 offsetTop 更可靠 - 别忘了移除事件监听器，尤其单页应用路由切换时，避免内存泄漏
真正难的不是让几个元素固定住，而是确定它们该固定在哪儿、固定到什么时候、以及用户滚动或输入时，它们是否还该“固”着 —— 这些逻辑一旦混进样式里，就很难维护。
