Question

我是编码和CSS的新手。阅读了大量有关relative和absolute定位的文章后，我的理解如下。但是，我不确定absolute职位是否应该是父relative职位的孩子，反之亦然。

有4个职位属性，即static, relative, absolute and fixed。
如果元素具有relative位置，则它仍然是文档正常流程的一部分。但是，它可以被属性top, right, bottom and left抵消。
它还可以被赋予z-index值并自动定位在静态元素上方
它还提供了一种包含子代码块子元素的方法，尽管我不确定这意味着什么。

根据这些信息，这是否意味着位置absolute的元素应该是位置为relative的元素的子元素，反之亦然或者无关紧要？

如果没关系，你何时会让他们彼此依赖，例如亲子关系？

Answer 1

没有真正的亲子关系。

相对定位与绝对定位无关。相对定位与普通静态定位相同，只是它可以偏移顶部/右侧/底部/左侧，如您所解释的那样。 “顶部/右侧/底部/左侧”值相对于元素通常存在于流中的任何位置。如果省略这些值，元素仍然处于相对位置，但其位置与静态位置完全相同。

OTOH，当你使用绝对定位时，绝对定位元素的“父”元素很重要。

这是因为LaC的答案解释了这一点。对于绝对定位，“顶部/右侧/底部/左侧”值相对于具有绝对，相对或固定定位的最近父元素。我将其称为“参考元素”。

考虑这个示例片段：

<body>
  <div style="width: 50%;">
    <p style="position: absolute; width: 20px; top: 0; right: 0">P</p>
  </div>
</body>

div将左对齐，静态（正常，在文档流程中）位置，50％的正文宽度。 p将是一个20px宽的框，位于视口的右上角：

-------------
|     |   |P|
|     |   --|
| div |     |
|     |     |
|     |     |
-------------

视口是引用元素，因为p中没有其他父元素具有绝对/固定/相对定位。

现在将div更改为相对定位：

<body>
  <div style="position: relative; width: 50%;">
    <p style="position: absolute; width: 20px; top: 0; right: 0">P</p>
  </div>
</body>

div将与之前完全相同，因为没有指定顶部/右侧/底部/左侧偏移。然而，即使它的风格没有，p的位置也会改变。

这是因为，之前，p与视口的右上角对齐，但现在有一个更接近的父元素（div）具有绝对/固定/相对定位。所以现在，div成为参考元素，p将与其右上角对齐：

-------------
|   |P|     |
|   --|     |
| div |     |
|     |     |
|     |     |
-------------

所以，只要知道无论何时使用绝对定位，都必须考虑文档中的参考元素是什么。并且，您可以设计样式表，以便选择此参考元素，这使得绝对定位成为非常有用的布局技术。

Answer 2

绝对定位是相对于具有绝对，相对或固定定位的最近祖先。有时，给元素相对定位只是为了建立一个新的参考框架，用于定位具有绝对定位的子元素。

Answer 3

绝对定位的元素总是相对于它位于祖先的壁橱中定位。如果不存在这样的祖先，则它将被定位到视口，视口可以是或可以不是根元素“html”，这取决于用户代理/浏览器。父母必然是祖先，但祖先不一定是父母。一个孩子必然是一个后裔，但一个后代不一定是一个孩子。具有绝对位置的元素可以是父亲的子女或后代，其位于相对位置。如果它们是，则它们可以相对于父母的位置定位，其中alreday具有相对或绝对的位置。哦，别忘了。阅读本文

Positioning

CSS中的绝对定位和相对定位之间是否存在父子关系？

3 个答案: