包含绝对定位元素的块，没有“顶部”，“右侧”，“底部”或“左侧”

Question

我记得在很久以前的某个地方读过，绝对定位一个元素而不给它任何top，right，bottom或left属性（如任何定位元素）将其从流中取出，但将其保持在同一个包含块（静态定位时应该存在的块）内。

在下面的示例（jsFiddle）中，元素＃2和＃3绝对定位，但＃2没有任何其他属性。

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

Answer 1

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

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

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

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height

http://www.w3.org/TR/CSS2/visuren.html#position-props

引用：

  

10.3.7绝对定位，未替换元素

     

出于本节和下一节的目的，术语“静态位置”（元素）大致指的是元素在正常流动中的位置。更确切地说：

     

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

Answer 2

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

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