css - Why is a div with "position: absolute" not by default relative to the document?

Question

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.

But in the following page:

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 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?

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"?

Answer 1

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).

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.

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' 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'

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.