为什么div的“位置：绝对”不是相对于文档默认的？

我认为一个普遍的规则是，只要div foo有position: relative，那么如果父母和祖先都没有任何非静态的position（所以需要有relative, absolute, or fixed之一），那么div foo现在将位置相对于整个文档。为什么div的“位置：绝对”不是相对于文档默认的？

但在以下页面：

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（默认），并且是实际上相对于集装箱分区。只有当top设置为0,0px或其他某个值时，它才是相对于文档。什么规则管理呢？

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

来源

2013-02-27 太極者無極而生

可能的重复[绝对位置，但相对于父母]（http://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent） – Curt 2013-02-27 12:02:15

什么规则管理呢？ [牛顿第一定律]（http://en.wikipedia.org/wiki/Newton%27s_laws_of_motion#Newton.27s_first_law） – 2013-02-27 12:05:48

关于你的编辑，我编辑了我自己的答案来引用这个：http://www.w3.org/ TR/CSS21/visuren.html＃COMP-abspos。这里规范宽泛地提到如果没有定位元素在附近，元素应该相对于其容器定位。我想这只适用于价值是'自动'，但我不认为它提到，它应该只适用于此。如果指定了一个值，正如你所提到的那样，它似乎将自己定位到文档。 – 2013-02-27 12:22:00

它是相对定位到文档（这就是为什么top: 0移动它所有的方式到顶部的原因），但如果你不设置top任何值（即你把它作为auto），该箱具有没有理由来自其静态位置的任意位置移动（它通常会坐，如果你还没有设置position: absolute）。

又见this answer和部分9.3和10规格。尤其是第10节包含了所有支配静态定位的规则，并且如果不是过于技术性的阅读，则是相当全面的。

在这种情况下，元素应该保持在静态位置的确切规则在10.6.4部分。在您的情况，您没有设置top或bottom，但你设置height，所以列出的六个之间的第二条规则适用：

2.“顶”和“底”是“自动”和'height'不是'auto'，然后将'top'设置为静态位置，将'margin-top'和'margin-bottom'的'auto'值设置为0，并解决'bottom'

因此，如果top没有给出除auto之外的东西，那么绝对定位的元素需要保持在其正常的静态垂直位置 - 它不应该任意移动。

此外，绝对定位元素的包含块始终是其最近定位的祖先（如果有的话）或初始包含块。

来源

2013-02-27 12:04:01 BoltClock

盒子有“没有理由转移”？听起来有点滑稽的解释......什么是正式规则？ – 2013-02-27 12:06:53

@动静能量：我编辑了我的答案。 – BoltClock 2013-02-27 12:47:22

从笔记上top attribute in the CSS 2.1 specification：

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

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

它then goes on to say：

...致使所述外箱的顶部被定位相对于它的包含块。定位框的包含块由最近的定位祖先（或者，如果没有，则为初始包含块，如我们的示例中所示）建立。

来源

2013-02-27 12:08:14

定位方案要复杂得多，但它基本上归结为“含有块”，它具有与它似乎暗示的不同定义 - http://www.w3.org/TR/CSS21/visuren.html#containing-块 – BoltClock 2013-02-27 12:10:23

我编辑了我的帖子。它会继续提及它如何定位到最近的定位祖先，或者如果没有定位祖先，则会提及最初的包含区块。我认为这里的'auto'值通过定位到它的容器符合这个规则，但是当指定一个值时它将自己定位在与身体本身相关的位置上 - 我想这在不同的浏览器中会有所不同。 – 2013-02-27 12:17:50

初始包含块通常是视口的位置，可以与视口进行比较，但通常它是根元素'html'的容器（而'html'和'body'分别生成自己的盒子）。此外，这不应该在不同的浏览器中有所不同，因为该规范有专门用于浏览器预计将遵循的盒计算的整个部分（第10节）。我也编辑了我的答案。 – BoltClock 2013-02-27 12:40:33

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

来源

2013-02-27 12:10:33

为什么div的“位置：绝对”不是相对于文档默认的？

回答

相关问题