Back to Details

sticky-and-fixed-elements

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Sticky and Fixed Elements

Sticky与Fixed元素

position: fixed vs position: sticky

position: fixed 与 position: sticky 对比

PropertyBehaviourUse for
position: fixed
Removed from document flow. Always stays at the same viewport position regardless of scroll or parent.Global navigation header, bottom toolbar, floating action button
position: sticky
Stays in document flow until it hits its scroll threshold, then locks in place. Returns to flow when parent scrolls past.Table column headers, section headings in a long list, in-page toolbars within a scroll container
Prefer 
sticky
over 
fixed
 when the element belongs to a specific section or scroll context. Fixed elements sit above everything and affect the entire viewport — use them only for truly global UI.
属性表现适用场景
position: fixed
脱离文档流。无论滚动或父元素如何，始终保持在视口的同一位置。全局导航页眉、底部工具栏、悬浮操作按钮
position: sticky
初始处于文档流中，当滚动到阈值位置后固定，父元素滚动超出时回到文档流。表格列标题、长列表中的区块标题、滚动容器内的页内工具栏
当元素属于特定区块或滚动上下文时，优先使用
sticky
而非
fixed
。Fixed元素位于所有内容之上，影响整个视口——仅将其用于真正的全局UI。

Top — Navigation Header

顶部——导航页眉

The global navigation header is the most common fixed element. It should:
  • Remain visible at all times so the user can always navigate away
  • Be as thin as possible to maximise content area — 48–64px is a common range
  • Have a background and shadow so content scrolling beneath it does not bleed through
  • On scroll, a subtle shadow (
    --shadow-sm
    ) signals that content is behind it
css
.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);
}
Compensate for the fixed header with matching top padding on the page body:
css
body { padding-top: var(--header-height); }
全局导航页眉是最常见的fixed元素，它应满足：
  • 始终保持可见，方便用户随时跳转
  • 尽可能轻薄以最大化内容区域——常见高度范围为48–64px
  • 带有背景与阴影，避免下方滚动的内容穿透显示
  • 滚动时，细微阴影（
    --shadow-sm
    ）提示用户后方有内容
css
.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);
}
为了抵消固定页眉的影响，需给页面主体设置对应的顶部内边距：
css
body { padding-top: var(--header-height); }

Bottom — Toolbar on Mobile

底部——移动端工具栏

On mobile, the bottom of the screen is the most reachable area with one thumb. A persistent bottom toolbar is the natural home for:
  • Primary navigation (bottom tab bar — iOS and Android convention)
  • Contextual actions for the current view (edit, share, delete)
  • A floating action button (FAB) for the single most important action
Bottom toolbars should:
  • Respect the safe area inset on devices with a home indicator: 
    padding-bottom: env(safe-area-inset-bottom)
  • Be visually separated from content (background fill, top border, or shadow)
  • Contain 3–5 items maximum — more than 5 should move to a menu or a different pattern
  • Use icons with labels for navigation tabs, or icons alone for contextual toolbars (with tooltips)
On desktop, bottom toolbars are uncommon. Status bars, editor toolbars, and command palettes are the desktop equivalent — these are typically 
position: fixed
at the bottom or 
position: sticky
within their scroll container.
在移动端，屏幕底部是单拇指最易触及的区域。持久化的底部工具栏适合放置：
  • 主导航（底部标签栏——iOS和Android通用规范）
  • 当前视图的上下文操作（编辑、分享、删除）
  • 悬浮操作按钮（FAB），用于最重要的单一操作
底部工具栏应满足：
  • 适配带有Home指示器设备的安全区域：
    padding-bottom: env(safe-area-inset-bottom)
  • 与内容视觉区分开（背景填充、顶部边框或阴影）
  • 最多包含3–5个元素——超过5个应移入菜单或改用其他模式
  • 导航标签使用图标加文字，上下文工具栏可仅用图标（搭配提示框）
在桌面端，底部工具栏并不常见。状态栏、编辑器工具栏和命令面板是桌面端的同类组件——它们通常是固定在底部的
position: fixed
，或是滚动容器内的
position: sticky
。

Sticky Table Headers

Sticky表格标题

For data tables inside a scroll container, sticky column headers prevent the user from losing track of what each column means.
css
thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}
If the table also has a sticky first column (for row identifiers), the top-left cell needs both 
top: 0
and 
left: 0
, and a higher 
z-index
to sit above both the header row and the sticky column.
对于滚动容器内的数据表格，粘性列标题可避免用户遗忘各列含义。
css
thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: 1;
}
如果表格同时包含粘性首列（用于行标识），左上角单元格需同时设置
top: 0
和
left: 0
，并使用更高的
z-index
以覆盖标题行和粘性列。

Stacking and Z-index

堆叠层级与Z-index

Sticky and fixed elements create stacking context. Define z-index as named tokens, not arbitrary numbers:
css
--z-base:       0;
--z-dropdown:   100;
--z-sticky:     200;
--z-header:     300;
--z-modal:      400;
--z-toast:      500;
Every fixed or sticky element must declare its z-index explicitly using a token. Avoid ad-hoc values like 
z-index: 9999
— they signal an unmanaged stacking context and will eventually conflict.
Sticky和Fixed元素会创建堆叠上下文。需将z-index定义为命名变量，而非随意数字：
css
--z-base:       0;
--z-dropdown:   100;
--z-sticky:     200;
--z-header:     300;
--z-modal:      400;
--z-toast:      500;
每个fixed或sticky元素都必须使用命名变量显式声明z-index。避免使用
z-index: 9999
这类临时值——这意味着堆叠上下文未被管理，最终会引发冲突。

How Many Fixed Layers Is Too Many

多少固定层算过多

Each fixed layer removes space from the content area and adds visual complexity. A page should rarely need more than:
  • 1 fixed header (top)
  • 1 fixed toolbar or bottom nav (bottom, mobile)
  • 1 floating action button or contextual overlay
A fixed header + fixed bottom toolbar + floating button + sticky sidebar + sticky table header all simultaneously is too many layers. Consolidate where possible.
每个固定层都会占用内容区域并增加视觉复杂度。页面通常不应超过以下数量：
  • 1个固定页眉（顶部）
  • 1个固定工具栏或底部导航（移动端底部）
  • 1个悬浮操作按钮或上下文浮层
同时存在固定页眉+固定底部工具栏+悬浮按钮+粘性侧边栏+粘性表格标题属于层数过多，需尽可能合并。

Review Checklist

审查清单

  • Is 
    sticky
    used for section-scoped elements and 
    fixed
    only for truly global UI?
  • Does the fixed header compensate for its height with body padding?
  • Does the bottom toolbar respect 
    env(safe-area-inset-bottom)
    on mobile?
  • Are all z-index values defined as named tokens, not arbitrary numbers?
  • Is the total number of simultaneous fixed layers minimal — header + one bottom element maximum in most cases?
  • Does content scrolling behind a fixed element not visually bleed through (background + shadow on the fixed element)?
  • 是否对区块级元素使用
    sticky
    ，仅对真正的全局UI使用
    fixed
    ？
  • 固定页眉是否通过主体内边距补偿了自身高度？
  • 底部工具栏在移动端是否适配了
    env(safe-area-inset-bottom)
    ？
  • 所有z-index值是否都定义为命名变量，而非随意数字？
  • 同时存在的固定层数量是否最少——多数情况下最多为页眉+一个底部元素？
  • 固定元素是否带有背景与阴影，避免下方滚动内容穿透显示？