2.3 定位（静态、相对、绝对、固定、粘性）

在 CSS 中，定位（positioning）是控制元素布局的另一种关键技术。通过定位，我们可以精确控制元素的位置。CSS 提供了五种定位方式：静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）和粘性定位（sticky）。每种定位方式有不同的应用场景和特性。

1. 静态定位（`position: static;`）

静态定位是所有元素的默认定位方式。使用静态定位的元素按照文档流进行排列，即按 HTML 顺序从上到下、从左到右显示。静态定位的元素不会受 top、right、bottom 和 left 属性的影响。

默认行为：元素按照文档流布局，并在其父元素的规定位置渲染。
top、right、bottom 和 left：这些属性对静态定位元素无效。

/* 静态定位的元素 */
.static-element {
  position: static; /* 默认值，完全遵循文档流 */
}

2. 相对定位（`position: relative;`）

相对定位使元素相对于其正常位置进行移动。元素仍然保留在文档流中，并占据原来的空间，但通过设置 top、right、bottom 和 left 可以相对于原来的位置进行偏移。

相对定位的元素：会保持其原有的文档流位置，但会发生偏移。
top、right、bottom 和 left：可以移动元素，但元素仍然占据原来的空间。

应用场景：相对定位常用于微调元素位置，或作为绝对定位元素的参考点。

/* 相对定位的元素 */
.relative-element {
  position: relative;
  top: 20px; /* 向下偏移 20px */
  left: 30px; /* 向右偏移 30px */
}

3. 绝对定位（`position: absolute;`）

绝对定位的元素相对于其最近的已定位祖先元素进行定位（即 position 值不是 static 的祖先元素）。如果没有已定位的祖先元素，则相对于 文档的根元素（通常是 <html> 元素）进行定位。绝对定位的元素从文档流中移除，不再占用空间。

绝对定位的元素：完全脱离文档流，不占空间，位置通过 top、right、bottom 和 left 进行指定。
top、right、bottom 和 left：用于设置相对于定位父元素的偏移量。

应用场景：绝对定位常用于实现浮动元素、弹出层、工具提示等。

/* 绝对定位的元素 */
.absolute-element {
  position: absolute;
  top: 50px; /* 距离最近的定位祖先元素的顶部 50px */
  left: 100px; /* 距离最近的定位祖先元素的左侧 100px */
}

4. 固定定位（`position: fixed;`）

固定定位使元素相对于浏览器窗口进行定位，无论页面如何滚动，元素始终保持在固定位置。固定定位的元素会脱离文档流，不占用空间。

固定定位的元素：元素的位置相对于视口固定，滚动页面时，元素不会随页面滚动而移动。
top、right、bottom 和 left：可以设置元素的位置，固定在页面上的某个位置。

应用场景：固定定位常用于实现固定导航条、悬浮按钮等元素。

/* 固定定位的元素 */
.fixed-element {
  position: fixed;
  top: 0; /* 固定在视口顶部 */
  right: 0; /* 固定在视口右侧 */
}

5. 粘性定位（`position: sticky;`）

粘性定位是一种结合了相对定位和固定定位的定位方式。元素会根据页面滚动位置，在其原始位置和固定位置之间切换。当元素到达指定位置时，它会“粘住”在该位置，并随着页面滚动保持固定，直到滚动到其容器的底部。

粘性定位的元素：在父容器内滚动时，元素会固定在某个位置。它仅在滚动过程中“粘住”，当父容器滚动超出元素时，它会恢复正常流动。
top、right、bottom 和 left：指定元素变为粘性时的偏移量，通常使用 top 设置元素距容器顶部的距离。

应用场景：粘性定位常用于实现固定表头、导航栏等，当用户滚动页面时，元素会保持在视口顶部。

/* 粘性定位的元素 */
.sticky-element {
  position: sticky;
  top: 0; /* 当元素滚动到视口顶部时，它会粘住 */
}

6. 定位的综合应用

通过不同的定位方式，可以实现复杂的布局效果。下面是一个结合各种定位方式的布局示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定位布局示例</title>
  <style>
    .container {
      position: relative;
      height: 500px;
      border: 1px solid #ccc;
    }
    .absolute-element {
      position: absolute;
      top: 50px;
      left: 100px;
      background-color: lightblue;
      padding: 10px;
    }
    .fixed-element {
      position: fixed;
      top: 0;
      right: 0;
      background-color: lightgreen;
      padding: 10px;
    }
    .sticky-element {
      position: sticky;
      top: 0;
      background-color: lightcoral;
      padding: 10px;
    }
    .relative-element {
      position: relative;
      top: 50px;
      left: 30px;
      background-color: lightyellow;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="absolute-element">绝对定位的元素</div>
    <div class="relative-element">相对定位的元素</div>
    <div class="sticky-element">粘性定位的元素（滚动时会固定）</div>
  </div>
  <div class="fixed-element">固定定位的元素（始终固定在视口右上角）</div>
</body>
</html>

在这个例子中：

.absolute-element 使用了绝对定位，设置了相对于父元素的偏移。
.relative-element 使用了相对定位，设置了相对于其原始位置的偏移。
.sticky-element 使用了粘性定位，滚动时会固定在视口顶部。
.fixed-element 使用了固定定位，始终固定在视口的右上角。

7. 总结

static：默认定位，按照文档流排列，不能使用 top、right、bottom、left。
relative：相对定位，元素会相对于其原位置进行偏移，仍占据文档流空间。
absolute：绝对定位，元素完全脱离文档流，位置相对于最近的已定位父元素。
fixed：固定定位，元素相对于浏览器窗口固定，页面滚动时元素不动。
sticky：粘性定位，结合相对和固定定位，元素在父容器内滚动时，达到某个位置会粘住，随后跟随页面滚动。

通过灵活运用这些定位方式，可以实现各种布局和动态效果。掌握定位的原理和应用，有助于开发出更加精确和高效的网页布局。

#前端开发分享于 2025-03-09

上一篇：2.2 浮动与清除浮动下一篇：2.4 Flexbox 弹性布局

2.3 定位（静态、相对、绝对、固定、粘性）