使用CSS位置相对和绝对位置的实用指南

在本文中，您将通过大量的演示和学习辅助工具了解如何使用 CSS position: relative 和 position: absolute。

CSS position 有时被认为是一个高级主题，因为它可以做一些意想不到的事情。好吧，不要让“专家”吓倒你追求卓越的 CSS 能力！一旦你具备了一些基本的想法，这是一个非常容易理解的话题。

渲染流

理解相对/绝对定位的一个重要概念是渲染流。

一般的想法是 HTML 元素都占用一些空间。您的浏览器的渲染引擎总是以类似网格的方式渲染所有内容，从左上角开始，依次向右下角移动，直到完成所有 HTML 内容的放置。

如果您曾经有过缓慢的互联网连接，并且看到网页上的大内容会向右和向下推动所有内容，那么这实际上是“渲染流”。

您可以使用 CSS position 更改此默认行为。

CSS position 有时被认为是一种高级技能，因为它不如 font-size 或 margin 等直观，因为它改变了浏览器的自然“渲染流程”。

这些是 CSS position 的可能值：

.foo {
  position: static;
  /* position: relative;
  position: absolute;
  position: sticky;
  position: fixed; */
}

今天我们只看 position: absolute 和 position: relative，因为它们可能是最通用的，一旦您对它们充满信心，它们就会为您带来很多里程。

当你制作一个 HTML 元素 position: relative 时，它会保持在布局的“流动”中，但你可以移动它！

.green-square {
  position: relative;
  top: 25px;
  left: 25px;
  /* ... */
}

除了 position: relative，您通常还需要定义 top、right、bottom 或 left 偏移。

您可以将“相对”位置视为：“相对于最初定位的位置”。在这种情况下，绿色方块现在是 25px from the left 和 25px from the top 最初的位置。

还值得注意的是，它的宽度和高度保留在方形网格中。这意味着它仍然被认为是布局的“流程”……它只是被轻推了。

绝对定位是一个非常强大的 CSS 规则，用于移动 HTML 元素。有时会产生意想不到的结果：

.orange-square {
  position: absolute;
  top: 0px;
  left: 0px;
  /* ... */
}

橙色方块实际上是这 25 个方块中的第 13 个（网格中间的那个），但它看起来像是最后一个方块！奇怪的。使用 position: absolute 会使元素“脱离流动”，因此它的网格空间会被折叠。

是的，但为什么它一直在那里？！

橙色方块放置在 0x, 0y 坐标处（例如：左上角）。就像浏览器渲染总是从左上角开始一样，position: absolute 元素也使用它作为它们的渲染起点。您可以使用 top/right/bottom/left 属性从那里偏移它。

但是，你也可以给它不同的起始坐标……

.grid {
  position: relative;
}
.orange-square {
  position: absolute;
  top: 0px;
  left: 0px;
  /* ... */
}

在上面的示例中，父元素 (div.grid) 具有 position: relative 规则，该规则导致橙色方块将其作为其渲染原点。

虽然这可能看起来不直观，但它实际上是故意的！考虑到这一点，您可以更好地控制 HTML 元素的排列位置/方式……

当您开始使用 position: relative 和 position: absolute 时，它打开了一个设计可能性的新世界。您可以创建分层的视觉元素，并对浏览器的渲染方式充满信心，从而放置您精心设计的视觉元素。

在 Mozilla 开发者网络上了解有关 CSS position 的更多信息