介绍

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

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

渲染流程

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

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

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

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

CSS 位置

CSSposition有时被认为是一种高级技能，因为它不像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它开启了一个充满设计可能性的新世界。您可以创建分层的视觉元素，并对浏览器的渲染方式充满信心，从而放置您精心设计的视觉元素。

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