Question

我已经阅读了很多关于绝对和相对定位的内容，但仍然无法正确理解它。什么是绝对和相对定位的实际用途，我应该何时使用它们？

Answer 1

absolute：元素相对于其第一个定位（非静态）祖先元素

定位

relative：元素相对于其正常位置

这告诉浏览器应该从文档的正常流程中删除要定位的内容，并将其放置在页面上的确切位置。它也取决于文档的正常流程 - 它不会影响HTML之前或之后的元素在网页上的位置。

如果你想从文档窗口的顶部放置一个元素10ems，你可以使用“顶部”偏移量将其定位在绝对位置：

 position: absolute;
 top: 10em;

此元素将始终从页面顶部显示10em - 无论正常流程中显示的是什么。

相对定位使用与绝对定位相同的四个定位属性。但是，不是将元素的位置基于浏览器视图端口，而是在元素仍处于正常流程中时从元素的位置开始。

例如，如果您的网页上有三个段落，而第三个段落有一个位置：相对样式放在其上，它的位置将根据其当前位置而不是从视口的原始侧面偏移。

<p>Paragraph 1.</p>
 <p>Paragraph 2.</p>
 <p style="position: relative;left: 2em;">Paragraph 3.</p>

在上面的示例中，第三个段落将位于容器元素左侧3em处，但仍将位于前两个段落的下方。它将保留在文档的正常流程中，并且稍微偏移。如果你把它改成了位置：绝对;跟随它的任何东西都会显示在它上面，因为它不再是文档的正常流程。