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 posit

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.

Answer 2

It is work div3 is calculating from body not from div2. Because you not specific "top" position of div than div3 get "top" from div2 and make your top point same as top point of div2. When you add atributte "top: 0px;" to dov3 then you see where is div3 and from which element affected div3 position.

Answer 3

From the notes on the top attribute in the CSS 2.1 specification:

This property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).

To me this implies that if no top is specified then the box is positioned to the top of its "natural" container (its parent). When top is specified it's then offset to the closest ancestor with relative or absolute positioning (which I assume html or body have by default).

It then goes on to say:

...which cause the top of the outer box to be positioned with respect to its containing block. The containing block for a positioned box is established by the nearest positioned ancestor (or, if none exists, the initial containing block, as in our example).