-5

这个链接说

绝对位置元素相对于第一个具有非静态位置的父元素定位。如果没有找到这样的元素，包含块是<html>

所以绝对实际上是相对的。那么为什么不直接使用 relative 呢？是否有任何实际用例只能通过使用绝对定位而不是相对定位来完成？

4

2 回答 2

3

所以绝对实际上是相对的。

NO，两者是完全不同的，它们的渲染是完全不同的。

相对定位元素在文档流中，而absolute定位元素在文档流之外。

是否有任何实际用例只能通过使用绝对定位而不是相对定位来完成？

假设您想要在图像悬停上的标题，您需要将包含标题的元素定位到必须定位的包含absolute图像的元素relative。如果你不分配position: relative;给持有absolute定位元素的元素，你的absolute定位元素只会在野外流出。

案子

情况2（如果元素没有定位relative，你的absolute定位元素会在野外流出）

简而言之，您可以说absolute定位元素不会占用文档上的任何物理空间，因为它们不在流中，因此为了避免它们在野外流出，我们使用容器元素定位relative，其中relative定位确实占用空间它们在流程中，因此当您将absolute定位的元素移动到页面上的任何位置时，它们不会影响任何其他元素的位置，但是如果您将position: relative;元素移动到页面上的任何位置，是的，它会影响其他元素 - 静态或相对定位在它周围.

于 2013-08-10T04:37:28.943 回答
1

具有relative定位的元素保留在文档流中。您提供的任何其他定位都会使元素从此位置偏移。

具有absolute定位的元素从文档流中移除，并相对于其第一个非静态父元素进行定位。

因此，假设您具有以下 HTML 结构和随附的小提琴：

<div class="awesomeParent">
  <ul>
    <li>First Piggy</li>
    <li>Second Piggy</li>
    <li>Third Piggy</li>
    <li>Fourth Piggy</li>
  </ul>
</div>

现在检查相同的小提琴，使用相对和绝对定位进行了一些修改。看到不同？

在第二个小提琴中，使用相对定位，应该保留第三个列表元素的空间。它只是被附加top: 40px;规则所抵消。

但是，在第三个小提琴中，使用绝对定位，第三个列表元素应该在的空间消失了。换句话说，该元素不再在文档的正常流程中，现在定位规则top: 40px;是相对于它的第一个非静态父元素。在这种情况下，这是 div .awesomeParent，它有一个position: relative. 如果没有找到父元素，则该元素将相对于该html元素进行定位。因此，为了将一个元素绝对定位在另一个元素中，您需要在父元素本身上使用固定位置、绝对位置或相对位置。

图像，以便您可以比较这三个：

未应用定位 相对定位 在此处输入图像描述

于 2013-08-10T04:39:23.147 回答