为什么默认情况下具有“位置：绝对”的 div 不相对于文档？

Question

我认为一个通用规则是，每当一个 div foo 有 position: relative，那么如果父级和祖先都没有任何非静态 position（所以需要有一个 relative, absolute, or fixed），然后，div foo 现在将相对于整个文档的位置。

但在以下页面中：

http://jsfiddle.net/4RcEn/6/

<div id="box1"></div>
<div id="box2">
    <div id="box3">some text inside some text</div>
</div>

<style>
  #box1 { width: 300px; height: 100px; background: #ffd; margin-left: 60px }
  #box2 { width: 300px; height: 100px; background: #fa0; margin-left: 60px }
  #box3 { width: 100px; height: 80px; background: #af0; position: 
          absolute; left: 20px;  }
</style>

box3 实际上的行为是这样的：left 是 20px 并且相对于文档，但 top 是 auto（默认情况下），实际上是相对于 容器div。只有当top 设置为0、0px 或其他值时，它才相对于文档。这是什么规则？

P.S. 使用规范中的规则，我没有看到这样的规则：如果未指定 top 或 left，则行为是这样那样的。所以这是一个事实上的标准，如果不指定，那么如果没有“包含块（定义为非静态定位块），那么它就不会相对于“初始块”？

Answer 1

它 相对于文档定位（这就是 top: 0 将其一直移动到顶部的原因），但如果您不将 top 设置为任何值（即您将其保留为auto），则该框没有理由从其静态位置（如果您没有设置position: absolute，它通常会坐在那里）移动任何地方。

另请参阅规范的 this answer 和部分 9.3 和 10。尤其是第 10 节，它包含管理静态定位的所有规则，如果不是过于技术性的话，也是相当全面的阅读。

在这种情况下，元素应保持在静态位置的确切规则在 10.6.4 部分。在您的场景中，您没有设置top 或bottom，但您确实设置了height，因此列出的六个规则中的第二个适用：

2。 'top' 和 'bottom' 是 'auto' 而 'height' 不是 'auto'，然后将 'top' 设置为静态位置，将 'margin-top' 和 'margin-bottom' 的 'auto' 值设置为 0 ，并求解“底部”

因此，如果top 没有被赋予除auto 以外的其他值，那么绝对定位的元素需要保持在其正常的静态垂直位置——它不应该任意移动自己。

此外，绝对定位元素的包含块总是要么是它最近的定位祖先（如果有的话），要么是初始包含块。

Answer 2

div3 是从 body 计算的，而不是从 div2 计算的。因为你没有指定 div 的“顶部”位置而不是 div3 从 div2 获得“顶部”并使你的顶部与 div2 的顶部相同。当您添加属性“顶部：0px；”到 dov3 然后你会看到 div3 在哪里以及从哪个元素影响了 div3 的位置。

Answer 3

来自top attribute in the CSS 2.1 specification上的注释：

此属性指定绝对定位框的上边距边缘在框的包含块的上边缘下方偏移多远。对于相对定位的盒子，偏移量是相对于盒子本身的顶部边缘（即，盒子在正常流程中被赋予一个位置，然后根据这些属性从该位置偏移）。

对我来说，这意味着如果没有指定top，那么该框将定位到其“自然”容器（其父级）的顶部。当top 是 指定它然后偏移到最近的祖先与relative 或absolute 定位（我假设html 或body 默认具有）。

它then goes on to say:

...这会导致外框的顶部相对于其包含块进行定位。定位框的包含块由最近的定位祖先建立（或者，如果不存在，则为初始包含块，如我们的示例所示）。