为什么是具有“position：absolute”的div不是默认相对于文档？ [英] Why is a div with "position: absolute" not by default relative to the document?
问题描述
我认为一个一般的规则是，当一个div foo 有 position：relative 父类和祖先有任何非静态的位置（所以需要有一个 relative，absolute或fixed ） ，然后， foo 现在将相对于整个文档的位置。
I thought a general rule is that, whenever a div foo has position: relative, then if none of the parent and ancestor has any non-static position (so need to have one of relative, absolute, or fixed), then, the div foo now will be position relative to the overall document.
但在下面的页面中：
<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 实际表现如下： code> left 是 20px 并且是相对于文档，但 top 是 auto （默认情况下），实际上是相对于容器div 。仅当 top 设置为 0 ， 0px 一些其他值，那么它是相对于文档。什么规则是管理这个？
box3 actually behave like this: the left is 20px and is relative to the document, but top is auto (by default), and is in fact relative to the container div. Only when top is set to 0, 0px, or some other value, then it is relative to the document. What rule is governing this?
PS 与规范的规则，我没有看到一个规则说：如果 top 或 left 没有指定，那么行为是这样的。因此，这是事实上的标准，如果没有指定，则如果没有包含块（其被定义为非静态定位块），则它将不是相对于初始块 p>
P.S. with the rules in the spec, I don't see a rule that says: if the top or left is not specified, then the behavior is such and such. So this is a de facto standard that if it is not specified, then if there is no "containing block (which is defined as non-static positioned block), then it won't be relative to the "initial block"?
推荐答案
这是相对于文档的位置（这就是为什么 0 将它一直移动到顶部），但如果你没有设置 top 任何值（即你留下 auto ），该框没有理由从任何位置移动到它的静态位置（如果你没有设置 position：absolute ）。
It is positioned relatively to the document (that's the reason why top: 0 moves it all the way to the top), but if you don't set top to any value (i.e. you leave it as auto), the box has no reason to shift anywhere from its static position (where it would normally sit if you hadn't set position: absolute).
另请参见此答案和 9.3 和 10 <特别是，第10节包含了所有管理静态定位的规则，如果不是过度技术性阅读，它是相当全面的。
See also this answer and sections 9.3 and 10 of the spec. Section 10, in particular, contains all the rules that govern static positioning, and is quite a comprehensive if not overly technical read.
确切的规则在这种情况下，元素应该保持静态位置在 10.6.4 。在您的方案中，您不要设置 top 或 bottom ，但是您设置 height ，因此列出的六个规则中的第二个规则适用：
The exact rule that says an element should remain in the static position in such a scenario is in section 10.6.4. In your scenario, you don't set top or bottom, but you do set height, so the second rule among the six that are listed applies:
2。 'top'和'bottom'是'auto'，'height'不是'auto'，然后将'top'设置为静态位置，将'margin-top'和'margin-bottom' ，并解决'bottom'
2. 'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
因此，绝对定位的元素需要保持在其正常的静态垂直位置，如果 top 没有给出 auto 以外的其他东西 - 它不应该随意移动。
So an absolutely-positioned element needs to remain in its normal static vertical position if top is not given something other than auto — it's not supposed to move itself arbitrarily.
此外，绝对定位元素的包含块总是位于最近的祖先（如果有）或初始包含块。
Also, the containing block of an absolutely-positioned element is always either its nearest positioned ancestor if there is one, or the initial containing block.
这篇关于为什么是具有“position：absolute”的div不是默认相对于文档？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
