- From: Øistein E. Andersen <html5@xn--istein-9xa.com>
- Date: Sat, 07 Apr 2007 19:34:36 +0200
- To: www-style@w3.org
Eli Friedman wrote:
> You might want to reread the bit about how the static
> position is calculated.
The relevant passage seems to be the following:
> the static position for 'top' is the distance from the top edge of the
> containing block to the top margin edge of a hypothetical box that
> would have been the first box of the element if its 'position' property
> had been 'static' and 'float' had been 'none'.
Eli Friedman wrote:
> absolutely positioned elements without an explicit position use the
> static position to calculate their position. The margin is then added
> to this value.
> (Note that the top margin edge of a box does not depend on its margin.)
Thanks, my problem was indeed that I failed to realise this, i.e., that
the `top margin edge' actually refers to the top of the *collapsed* margin.
Given the two following boxes:
________________________________________________ _ 0
|(1) |
| margin-bottom: 2; | _ 2
| position: static; |
| height: 5; | _ 4
|________________________________________________|
: : _ 6
:................................................:
.............................. _ 0
:____________________________:
|(2) | _ 2
| margin-top: 1; |
| position: absolute; | _ 4
| height: 6; |
| top: auto; | _ 6
|____________________________|
To calculate the static position of box (2), we can calculate the position
of an hypothetical box (2'):
________________________________________________ _ 0
|(1) |
| margin-bottom: 2; | _ 2
| position: static; |
| height: 5; | _ 4
|________________________________________________|
: .............................. : _ 6
:.........:____________________________:.........:
|(2') | _ 8
| margin-top: 1; |
| position: static; | _ 10
| height: 6; |
| | _ 12
|____________________________|
The margins between box (1) and box (2') collapse; hence the `top margin edge'
of box (2') is at position 5 (and *not* at position 6). Box (2) can then be
positioned using this value:
________________________________________________ _ 0
|(1) |
| margin-bottom: 2; | _ 2
| position: static; |
| height: 5; | _ 4
|________________________________________________|
: :____________________________: : _ 6
:.........|(2) |.........:
| margin-top: 1; | _ 8
| position: absolute; |
| height: 6; | _ 10
| (top: 5;) |
|____________________________| _ 12
> Firefox and Opera get it right as far as I can tell.
Their rendering seems to agree with the algorithm outlined above.
Please let me know if my interpretation is still inaccurate.
Thanks a lot for your helpful comments.
--
Øistein E. Andersen
Received on Saturday, 7 April 2007 21:42:45 UTC