CSS 零基础教程

CSS position 定位

CSS 中的定位（Positioning）允许你控制网页上元素的放置方式。

默认情况下，元素按照它们在 HTML 中出现的顺序自然排列（称为文档流），但 CSS 定位允许你打破这种常规流，将元素精确地排列在你想要的位置。

本章将涵盖 static、relative、absolute 和 fixed 定位值，为你提供构建复杂网页设计的工具。

1. 理解 position 属性

position 属性指定了用于元素的定位方法的类型。它接受五个主要值：

  • static：默认值。元素按照文档的正常流进行定位。
  • relative：相对于其正常位置进行定位。
  • absolute：相对于其最近的已定位祖先元素进行定位。
  • fixed：相对于视口 (viewport) 进行定位，这意味着即使页面滚动，它也保持在同一位置。
  • sticky：相对定位和固定定位的混合体（将在以后的课程中介绍）。

我们将详细探讨每一个值。

2. Static 定位 (静态定位)

2.1 什么是 Static 定位？

static 是 position 属性的默认值。当一个元素具有 position: static; 时，意味着该元素按照文档的正常流进行定位。它会出现在 HTML 结构中它自然应该出现的地方。

2.2 Static 定位如何工作

在静态定位下，top、right、bottom 和 left 属性没有任何效果。元素的位置完全由其在 HTML 中的顺序和周围元素决定。

代码示例：

<div class="container">
  <div class="static-element">这是一个静态元素。</div>
</div>
.container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  margin-bottom: 20px;
}
.static-element {
  position: static; /* 虽然是多余的，但为了演示写出来 */
  top: 50px; /* 无效 */
  left: 50px; /* 无效 */
  background-color: lightblue;
  padding: 10px;
}

在这个示例中，static-element 仅会根据 HTML 结构自然地放置在 container 内部。此时，top 和 left 属性将被忽略（不起作用）。

2.3 实际应用

虽然 static 看起来微不足道，但它很重要，因为它是基准。理解元素通常是静态定位的，有助于你理解其他定位值如何改变这种默认行为。你可能会使用 position: static 来重置被其他 CSS 规则改变了定位的元素。

3. Relative 定位 (相对定位)

3.1 什么是 Relative 定位？

relative 定位允许你将元素从其在文档流中的正常位置进行偏移。相对定位元素的关键特征是：它保留了其在布局中的原始空间。其他元素会表现得好像该元素仍然在原来的位置一样。

3.2 Relative 定位如何工作

当你设置 position: relative; 时，你可以使用 top、right、bottom 和 left 属性来使元素相对于其原始位置移动。

代码示例：

<div class="container">
  <div class="relative-element">这个元素是相对的定位。</div>
  <div class="normal-element">该元素未定位。</div>
</div>
.container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  position: relative;
}

.relative-element {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: lightgreen;
  padding: 10px;
}

.normal-element {
  background-color: lightcoral;
  padding: 10px;
}

解释：在这个例子中，relative-element 相对于它通常应该在的位置向下移动了 20px，向左移动了 30px。重要的是，紧随其后的 normal-element 仍然出现在它原本的位置，就好像 relative-element 没有移动过一样（虽然视觉上可能重叠）。

3.3 实际应用

相对定位常用于对元素位置进行微调，而不影响周围元素。它也常被用作更复杂定位方案的基础（特别是作为绝对定位元素的参考容器）。

4. Absolute 定位 (绝对定位)

4.1 什么是 Absolute 定位？

absolute 定位将元素从正常文档流中完全移除。绝对定位的元素不占据空间，不会影响页面上其他元素的位置（其他元素会忽略它的存在）。

它的定位是相对于其最近的已定位祖先元素（nearest positioned ancestor）。所谓的“已定位祖先”，是指 position 值不为 static（例如 relative, absolute, fixed）的祖先元素。

4.2 Absolute 定位如何工作

当你设置 position: absolute; 时，使用 top、right、bottom 和 left 属性来指定元素相对于其参考祖先的位置。如果没有找到已定位的祖先，它将相对于初始包含块（通常是 <html> 元素，即视口）进行定位。

代码示例：

<div class="container">
  <div class="absolute-element">该元素是绝对定位的。</div>
  <div class="normal-element">该元素未定位。</div>
</div>
.container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  position: relative; /* 重要！使容器成为已定位祖先 */
}
.absolute-element {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: lightsalmon;
}
.normal-element {
  background-color: lightcoral;
  padding: 10px;
}

解释：在这个例子中，container 设置了 position: relative;，这使它成为 absolute-element 的已定位祖先。因此，absolute-element 被定位在距离 container 顶部 20px 和右侧 20px 的位置。

重要提示： 如果你移除了 .container 的 position: relative;，absolute-element 将会相对于整个网页（视口）进行定位。

4.3 实际应用

绝对定位在创建复杂布局、覆盖层 (overlays)、工具提示 (tooltips)、下拉菜单和需要在容器内精确放置的 UI 元素时非常强大。

5. Fixed 定位 (固定定位)

5.1 什么是 Fixed 定位？

fixed 定位类似于绝对定位，但有一个关键区别：固定元素总是相对于浏览器视口 (viewport) 进行定位。这意味着即使其实用户滚动页面，该元素也会保持在屏幕上的同一位置。

5.2 Fixed 定位如何工作

当你设置 position: fixed; 时，元素会脱离文档流，你可以使用 top、right、bottom 和 left 属性将其固定在屏幕的特定位置。

代码示例：

<div style="height: 500px; overflow: auto;">
    <p>Scrollable content...</p>
    <p>Scrollable content...</p>
    <p>Scrollable content...</p>
    <p>Scrollable content...</p>
    <p>Scrollable content...</p>
    <p>Scrollable content...</p>
    <p>Scrollable content...</p>
    <p>Scrollable content...</p>
    <p>Scrollable content...</p>
    <p>Scrollable content...</p>
    <p>Scrollable content...</p>
    <p>Scrollable content...</p>
    <p>Scrollable content...</p>
    <p>Scrollable content...</p>
    <p>Scrollable content...</p>

  <div class="fixed-element">This element is fixed.</div>
</div>
.fixed-element {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: lightskyblue;
  padding: 10px;
}

解释：在这个例子中，fixed-element 将始终停留在视口的右下角，即使用户滚动页面浏览长内容，它也不会移动。

5.3 实际应用

固定定位常用于：

  • 始终固定在顶部的导航栏 (Sticky Headers)。
  • “回到顶部”按钮。
  • 悬浮聊天窗口。
  • 持久的号召性用语 (CTA) 按钮。

6. 组合定位值

你可以组合不同的定位值来实现复杂的布局效果。Web 开发中最常见的技术之一是：“子绝父相”。即在父容器上使用 position: relative; 来建立定位上下文，然后在子元素上使用 position: absolute; 来将它们精确地放置在该容器内。

7. Z-index 与堆叠上下文

当元素由于定位而发生重叠时，z-index 属性决定了哪个元素显示在上面。具有较高 z-index 值的元素会堆叠在具有较低值的元素之上。z-index 属性仅对已定位的元素（即 position 不是 static 的元素）有效。