多个position: fixed元素需统一收口至公共定位祖先才能实现可控排版与层级管理，否则因各自创建独立堆叠上下文导致z-index失效、重叠顺序由HTML书写顺序决定；应采用容器fixed+内部flex/grid布局，并为内容区预留padding避免遮挡。
多个 position: fixed 元素不会自动排列，也不会感知彼此位置——它们都直接相对于视口定位，不参与布局计算。想让它们整齐排布、分层可控，必须主动干预，而不是靠 margin 或 flex 子项自动对齐。
多个 fixed 元素重叠时 z-index 为啥不生效？
这不是 bug，是规范行为：position: fixed 元素默认各自创建独立的堆叠上下文（stacking context），彼此的 z-index 不在同一个比较体系里。结果就是：谁写在 HTML 后面，谁盖在上面，z-index 值反而被忽略。
- 必须给一个公共祖先（比如
<body>或专用容器）设置position: relative或position: fixed+z-index，才能统一堆叠上下文 -
z-index只对已定位元素（position不为static）有效，别漏写position: fixed - 避免全局设
z-index: 9999；导航栏用z-index: 100、弹窗用z-index: 1000、提示条用z-index: 90更易维护
横向/纵向排列多个 fixed 元素，别手动算 left/top
用 left: calc(20px + 60px * 2) 这类硬编码方式极易出错，且无法响应滚动条宽度变化或动态增删元素。真正可控的做法是「容器 fixed，子项普通布局」。
- 把所有要固定排列的元素包进一个
<div class="fixed-toolbar">，然后给这个容器设position: fixed - 子元素用
display: flex/grid或常规inline-block排列，不再需要每个都写top/left - 右侧对齐优先用
right: 20px，而非left: calc(100% - 60px)——后者受滚动条宽度影响，在不同设备上会偏移
fixed 元素遮挡正文内容怎么办？
position: fixed 元素脱离文档流，不占空间，所以正文会“顶上去”被盖住。不能只靠 z-index 解决，得给内容区主动留白。
立即学习“前端免费学习笔记（深入）”；
- 顶部导航高度为 60px，就在
<body>上加padding-top: 60px - 底部操作栏高 50px，就加
padding-bottom: 50px - 如果高度动态（比如多语言文案导致高度变化），就得用 JS 读取元素
offsetHeight后更新style.paddingTop - 移动端慎用
height: 100vh—— Safari 中它包含地址栏高度，会导致内容被截断
最常被忽略的是堆叠上下文的隐式创建：哪怕你写了 z-index: 999，只要父容器没设 position，它就和隔壁 fixed 元素不在同一层级里。动手前先检查 DOM 结构里有没有共用的定位祖先。
