css - 包含绝对定位元素的块，没有“top”、“right”、“bottom”或“left”

Question

我记得很久以前在某处读过，绝对定位一个元素而不给它任何top, right, bottomorleft属性将（作为任何定位的元素）将其从流程中取出，但将其保留在同一个包含块中（它应该静态定位时进入）。

在下面的示例 ( jsFiddle ) 中，元素 #2 和 #3 是绝对定位的，但 #2 没有任何附加属性。

在此处输入图像描述

我一直在寻找解释该行为的文档，以便我可以继续使用它而不必担心可能出现反斜杠，但在 Google 或 SO 上并不幸运。有人能指出我正确的方向吗？

score 2 · Accepted Answer

top对于绝对定位的元素，偏移量（等left）的默认值为auto.

在这种情况下，position: static即使内容已从文档流中取出，元素仍会保持在其应有的位置。

对“静态位置”概念的引用包括：

去引用：

10.3.7 绝对定位、非替换元素

就本节和下节而言，术语“静态位置”（元素的）粗略地指的是元素在正常流程中的位置。更确切地说：

静态位置包含块是假设框的包含块，如果其指定的“位置”值为“静态”且其指定的“浮动”为“无”，则该框将成为元素的第一个框。

score 2 · Accepted Answer

它不会将它保留在包含块内，因为一旦它被绝对定位，它总是在文档流之外。它所做的（不设置顶部/底部/左侧/右侧）是将其保持在默认位置，如果它仍然是静态位置。

要强制它位于父容器内，请将父容器设置为 position: relative 和 top/bottom/left/right 根据需要。

2 回答 2