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或其他值时，它才相对于文档。这个规则是什么？

PS 使用规范中的规则，我没有看到一条规则说：如果未指定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

来自top attribute in the CSS 2.1 specification的说明：

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

对我而言，这意味着如果未指定top，则该框位于其“自然”容器（其父级）的顶部。当top 指定为时，它会偏移到距离最近的祖先relative或absolute定位（我假设为html或body默认情况下）。

then goes on to say：

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

Answer 3

工作div3是从身体而不是从div2计算的。因为你不是div的特定“顶部”位置比div3从div2获得“top”并且使你的顶点与div2的顶点相同。当你添加atributte“top：0px;”时到dov3然后你看到div3在哪里以及哪个元素影响了div3的位置。

为什么相对于文档，“position：absolute”的div不是默认的？

3 个答案: