滚动时保持关键 UI 常驻：sticky 与 fixed…

当需要设计滚动时保持可见的导航头、底部工具栏、浮动按钮或表格表头时，用来决定用 sticky 还是 fixed 并正确实现。

适用场景

解决思路

1. 区分两种定位：`position: fixed` 脱离文档流，无论滚动或父元素如何都固定在视口同一位置，适合全局导航头、底部工具栏、浮动操作按钮；`position: sticky` 保持在文档流中，直到触及滚动阈值才锁定，父元素滚过后回到流中，适合表格列头、长列表中的分节标题、滚动容器内的页内工具栏。
2. 优先用 `sticky` 而非 `fixed`：当元素属于某个特定区块或滚动上下文时用 sticky；fixed 元素浮于一切之上并影响整个视口，只用于真正全局的 UI。
3. 全局导航头应始终可见以便用户随时离开；尽量薄以最大化内容区，常见高度 48–64px；要有背景和阴影，避免下方滚动内容透出；滚动时用细微阴影（如 `--shadow-sm`）提示下方有内容。参考实现：`.site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: var(--color-surface); box-shadow: var(--shadow-sm); z-index: var(--z-header); }`。
4. 用与固定头等高的 body 顶部内边距补偿其占位：`body { padding-top: var(--header-height); }`。
5. 移动端底部工具栏：底部是单拇指最易触达区域，适合放主导航（底部标签栏，iOS/Android 惯例）、当前视图的上下文操作（编辑、分享、删除）、或针对最重要单一操作的浮动按钮（FAB）。
6. 底部工具栏应：用 `padding-bottom: env(safe-area-inset-bottom)` 适配带 home 指示条设备的安全区；用背景填充、上边框或阴影与内容视觉分隔；最多放 3–5 项，超过 5 项应移入菜单或换模式；导航标签用图标加文字，上下文工具栏可只用图标（配 tooltip）。
7. 桌面端底部工具栏不常见；状态栏、编辑器工具栏、命令面板是桌面等价物，通常用 `position: fixed` 置于底部，或在滚动容器内用 `position: sticky`。
8. 滚动容器内的数据表格用 sticky 列头，避免用户丢失列含义：`thead th { position: sticky; top: 0; background: var(--color-surface); z-index: 1; }`。
9. 若表格同时有 sticky 首列（行标识），左上角单元格需同时设 `top: 0` 和 `left: 0`，并用更高的 `z-index` 使其位于表头行和 sticky 列之上。
10. sticky 和 fixed 元素会创建层叠上下文，z-index 要用命名 token 而非任意数字，例如：`--z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-modal: 400; --z-toast: 500;`。每个 fixed 或 sticky 元素都必须显式声明其 z-index token，避免 `z-index: 9999` 这类临时值。
11. 控制固定层数量：每个固定层都会占用内容区并增加视觉复杂度，页面通常最多需要 1 个固定头（顶部）、1 个固定工具栏或底部导航（移动端底部）、1 个浮动按钮或上下文浮层；固定头 + 固定底部工具栏 + 浮动按钮 + sticky 侧栏 + sticky 表头同时出现就太多了，应尽量合并。
12. 自查清单：区块级元素是否用 sticky、只有真正全局 UI 才用 fixed；固定头是否用 body padding 补偿高度；移动端底部工具栏是否适配 `env(safe-area-inset-bottom)`；所有 z-index 是否用命名 token；同时存在的固定层是否最少（多数情况最多头部加一个底部元素）；固定元素下方滚动内容是否不会透出（有背景和阴影）。

适用边界 · 注意事项

• 当元素只属于某个区块或滚动上下文时，不要用 fixed（应改用 sticky）。
• 不要在同一页面堆叠过多固定层（如固定头 + 固定底栏 + 浮动按钮 + sticky 侧栏 + sticky 表头同时出现）。
• 不要使用 `z-index: 9999` 之类的任意数值，应使用命名 token。