0Pricing
CSS Academy · 课时

固定定位与粘性定位

将元素固定到视口，或创建滚动时保持粘附的页眉和侧边栏。

固定定位与粘性定位 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

position: fixed

固定定位元素会相对于浏览器视口进行定位，即使页面滚动，它也会保持在原处。它同样会脱离文档流。

<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>

固定定位的使用场景

position: fixed 的常见用途：

  • 固定在顶部的导航栏
  • 浮动操作按钮（FAB）
  • 右下角的聊天组件
  • Cookie 同意横幅
  • 模态覆盖层

为固定页眉留出空间

固定页眉会覆盖其下方的内容。请添加与页眉高度相等的顶部内边距或外边距，以将内容向下推移：

<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>

变换父元素与 fixed

一个关键特例是：如果父元素应用了 CSS transform、perspective 或 filter，固定定位会相对于该父元素，而不是相对于视口。这是一个常见错误。

position: sticky

position: sticky 是一种混合模式：元素会正常滚动，直到达到定义的阈值（例如 top: 0），然后在其父容器内固定在原处。

<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>

sticky 需要可滚动的父元素

粘性元素会在其包含块内部固定。如果父元素高度不足以产生滚动，sticky 就不会生效。父元素不能将 overflow 设置为 hidden。

sticky 的顶部、右侧、底部和左侧

必须至少定义一个偏移量，sticky 才会生效。常见模式：

<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>

粘性表头

Sticky 非常适合用于可滚动表格包装器中的表头——用户滚动浏览行时，表头仍会保持可见。

<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>

粘性侧边栏模式

一种经典的粘性侧边栏，会在主要内容滚动时保持在视图中：

<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>

固定定位与粘性定位的总结

主要区别：

  • 固定定位：始终相对于视口，始终脱离文档流
  • 粘性定位：在达到阈值前随内容滚动，仍处于文档流中，并在父元素边界处停止

性能：固定定位与图层

固定定位元素会创建新的层叠上下文；如果与需要重新绘制的区域重叠，可能会在滚动时触发布局。请保持固定元素简单，并避免在其上使用 box-shadow 等开销较大的属性。

快速检查

position: sticky 有什么限制，而 position: fixed 没有这个限制？

回顾

position: fixed 会将元素固定到视口，适用于粘性导航和覆盖层。position: sticky 会先正常滚动，达到阈值后再固定——非常适合表头和侧边栏。两者都需要至少一个偏移属性才能启用固定效果。

常见问题解答

「固定定位与粘性定位」课时是免费的吗？

是的 — 「固定定位与粘性定位」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「固定定位与粘性定位」这节课中我会学到什么？

将元素固定到视口，或创建滚动时保持粘附的页眉和侧边栏。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「固定定位与粘性定位」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 静态定位与相对定位
  2. 绝对定位与包含块
  3. 固定定位与粘性定位
  4. Z-index 与堆叠上下文
← 返回 CSS Academy