1

我认为一般规则是，只要 divfoo有position: relative，那么如果父级和祖先都没有任何非静态position（因此需要有一个relative, absolute, or fixed），那么 divfoo现在将相对于整个文档的位置。

但在以下页面中：

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

PS与规范中的规则，我没有看到一条规则说：如果toporleft没有指定，那么行为就是这样那样。所以这是一个事实上的标准，如果没有指定，那么如果没有“包含块”（定义为非静态定位块），那么它不会相对于“初始块”？

4

3 回答 3

4

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

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

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

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

所以一个绝对定位的元素需要保持在其正常的静态垂直位置，如果top没有给出其他auto的东西——它不应该任意移动自己。

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

于 2013-02-27T12:04:01.957 回答
0

top从CSS 2.1 规范中关于属性的注释：

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

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

然后它继续说：

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

于 2013-02-27T12:08:14.683 回答
0

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

于 2013-02-27T12:10:33.403 回答