绝对位置和相对位置——最简单的指南

我记得我开始前端之旅的时候。

CSS 让我头疼不已。和大多数人一样，我以为它很简单。结果，我却发现它无法正常工作，这真是让我恼火。

我的通常流程是：

1. 发现问题。
2. 谷歌一下。
3. 在 StackOverflow 上查找解决方案。
4. 无需任何理解即可完成 C/P。

我经常遇到“绝对位置”和“相对位置”这两个属性。“它们到底是什么？”

它们的使用频率应该比你可能使用的要低得多，而且如果使用得当，它们非常简单。

让我们更深入地探讨这个话题。

绝对位置和相对位置有何关系？

通常，所有元素都遵循 DOM 流。 

但有时，您需要打破这种流程并告诉元素确切的去向。

假设我有这个 HTML 页面：

代码很简单：

<div class="bordered-container">
  <div class="absolute-item" />
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(
90deg, rgb(153, 253, 103) 0%, rgb(88, 255, 228) 100%);
}

.bordered-container {
  width: 600px;
  height: 300px;
  border: 2px solid black;
}

.absolute-item {
  width: 40px;
  height: 40px;
  background-color: red;
}

我现在想绝对地定位它absolute-item，并告诉它确切的位置。我希望它始终位于bordered-container;10px远离底部，并且30px位于右侧。

让我们添加代码：

.absolute-item {
  position: absolute;
  bottom: 10px;
  right: 30px;
  width: 40px;
  height: 40px;
  background-color: red;
}

结果是：

显然，这不是我们想要的。正方形的位置10px/30px远离整个文档的边缘，而不是bordered-container！

这就是我们需要的原因position: relative;。

这不是黑魔法

无论何时设置position: absolute;一个元素，它都必须相对于某个东西进行定位。

您的绝对元素将寻找最近的父元素position: relative;，并相对于它定位自己。

如果没有这样的元素，它将根据该body元素进行定位。这在我们之前的案例中就发生过。

为了解决这个问题，我们只需添加position: relative;到bordered-container：

.bordered-container {
  position: relative;
  width: 600px;
  height: 300px;
  border: 2px solid black;
}

结果是：

是的，就这么简单。

Z-Index 到底是什么？

当处理绝对位置时，您可能会遇到 z-index，因此值得一提。

我确信您已经尝试过将其设置为9999但仍然不起作用。

z-index当您有多个绝对位置元素时使用。

绝对定位的元素中，最大的元素z-index放在顶部，最小的元素放在底部。 

就是这样。

让我们保持简单。

绝对位置的缺点

绝对定位的元素会破坏 DOM 流。 

它们不占用文档上的任何物理空间。

这意味着即使您不想要，上面/下面的元素也可能会重叠。

这可能变得难以维持。 

我们的元素应该是独立的，如果我们改变其中一个，我们不想调整其他所有东西。

这并不意味着position: absolute;它不好！只是说它有自己的用例，你需要了解它们。

何时使用它

如果你需要调整页面或组件的布局，position: absolute;99% 的情况下应该避免使用这种方法。建议使用 Flexbox 或 Grid 布局。

但是，如果你想在图片上添加徽章，它就非常完美了。徽章通常位于图片的顶部（或边缘），这样看起来就像图片的一部分。

或者如果你想要将一些图像/元素堆叠在一起。除了 之外没有其他办法了position: absolute;。

这就是最终的指南：只有在没有其他方法可以实现时才使用绝对定位。

结论

绝对定位非常强大，如果没有它，Web 就不会呈现这种样子。

如果使用得当，它就会很有魅力。

但这些用例相当少见。如果经常使用，你的应用维护起来会非常困难。

如果您在 StackOverflow 上找到带有 的答案position: absolute;，请尝试跳过它。继续查找。还有其他方法吗？

如果是这样，请避免absolute。

这篇文章最初发表在 Dom 的个人博客上。去那里看看他新设计的精彩博客吧 ✨