Frontend Academy · 课时

定位：relative、absolute、fixed、sticky

Q: 「定位：relative、absolute、fixed、sticky」这节课中我会学到什么？

使用 position 值让元素脱离正常文档流，以覆盖内容、固定页眉并创建粘性侧边栏。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 position 值让元素脱离正常文档流，以覆盖内容、固定页眉并创建粘性侧边栏。

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

正常文档流

默认情况下，元素遵循正常文档流：块元素垂直堆叠，行内元素在文本中水平流动。position 属性可以让您脱离此流程，用于创建覆盖层、固定页眉和工具提示。

position: static（默认）

每个元素都以 position: static 开始。这意味着元素由正常文档流进行定位。top、right、bottom 和 left 属性对静态元素不起作用。

position: relative

position: relative 会让元素保留在正常文档流中，同时允许您使用 top、right、bottom 和 left 将其从原始位置偏移。更重要的是，它会为绝对定位的后代元素创建定位上下文。

.card {
  position: relative;
  top: 10px;    /* shift 10px down from original position */
  left: -5px;   /* shift 5px left */
}

绝对定位

position: absolute 会将元素从正常文档流中移除。它会相对于最近的已定位祖先元素进行定位（任何非 static 的 position 值）。如果不存在已定位的祖先元素，它就会相对于视口进行定位。

.card {
  position: relative; /* creates context */
}
.card .badge {
  position: absolute;
  top: 12px;
  right: 12px; /* top-right corner of .card */
}

z-index 属性

已定位的元素可以相互重叠。请使用 z-index 控制堆叠顺序。z-index 越高，就越靠上。它只对已定位的元素有效（static 除外），并会创建新的堆叠上下文。

.tooltip {
  position: absolute;
  z-index: 100; /* above other content */
}
.modal {
  position: fixed;
  z-index: 1000; /* above tooltip */
}

固定定位

position: fixed 会将元素从正常文档流中移除，并将其固定到视口上。它不会随页面滚动。它非常适合用于固定页眉、浮动操作按钮和 Cookie 横幅。

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: white;
  z-index: 50;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

粘性定位

position: sticky 是一种混合方式：元素会随页面滚动，直到触及某个阈值（使用 top 或 bottom 设置），然后就会固定在那里。它适合用于长表格中的分节标题，或在页眉之后固定的侧边栏。

.sidebar {
  position: sticky;
  top: 80px; /* sticks 80px from top after scroll */
  align-self: flex-start;
}

使用绝对定位居中

一种经典技巧是将 position: absolute; top: 50%; left: 50% 与 transform: translate(-50%, -50%) 结合使用，使元素在其已定位的父元素中完美居中。

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  background: white;
  border-radius: 12px;
}

隐藏溢出会裁剪绝对定位子元素

默认情况下，绝对定位的子元素可以溢出父元素的边界。给父元素添加 overflow: hidden 会裁剪其框外的所有内容，这对卡片图片效果和徽章裁剪很有用。

陷阱：意外的堆叠上下文

某些属性会无意中创建堆叠上下文，例如 transform、filter 和 isolation: isolate。这可能导致 z-index 冲突：某个 z-index 为 9999 的元素仍然位于另一个元素之后，因为它处于较低层级的堆叠上下文中。

各种定位方式的使用时机

relative：用于偏移和创建定位上下文。absolute：用于相对于父元素定位的徽章、工具提示和覆盖层。fixed：用于持久显示的页眉、模态框和提示消息。sticky：用于分节标题和随滚动移动的侧边栏导航。请不要用 position 实现布局，而应使用弹性布局或网格布局。

快速检查

某个元素具有 position: absolute; top: 0; right: 0;。如果它的父元素具有 position: relative，该元素会显示在哪里？

回顾：CSS 定位

static 是默认值。relative 会在不离开文档流的情况下产生偏移，并创建定位上下文。absolute 会离开文档流，并相对于最近的已定位祖先元素进行定位。fixed 会固定在视口上。sticky 会先随页面滚动，然后固定下来。请使用 z-index 控制重叠顺序。

常见问题解答

「定位：relative、absolute、fixed、sticky」课时是免费的吗？

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

「定位：relative、absolute、fixed、sticky」这节课中我会学到什么？

使用 position 值让元素脱离正常文档流，以覆盖内容、固定页眉并创建粘性侧边栏。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「定位：relative、absolute、fixed、sticky」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Frontend Academy