Question

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

所以绝对是相对的。那么为什么不只是使用亲戚呢？是否有任何实际使用案例只能通过绝对定位而不是相对来实现？

Answer 1

所以绝对是相对的。

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

相对定位元素位于文档流中，而absolute定位元素不在文档流中。

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

假设您想要图像悬停上的标题，您需要将包含元素absolute的标题定位到包含图像的元素，该图像必须位于relative。如果您未将position: relative;分配给包含absolute个定位元素的元素，那么您的absolute定位元素将会在野外流出。

Case

Case 2（如果元素未定位relative，您的absolute定位元素将在野外流出

因此，你可以说absolute定位的元素不会占用文档上的任何物理空间，因为它们不在流中，所以为了保存它们在野外流出，我们使用容器元素位于relative的{{1}}位置确实占据了流量空间，因此当您将relative定位元素移动到页面的任何位置时，它们不会影响任何其他元素位置但是如果你将absolute元素移动到页面的任何位置，是的，它会影响其他元素 - 静态或相对位于它周围。

Answer 2

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

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

因此，假设您拥有以下HTML结构，并附带fiddle：

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

现在检查同一个小提琴，使用relative和absolute定位修改一下。看到区别？

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

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

图片，以便您可以比较三个：

在CSS中使用绝对定位有什么意义？

2 个答案: