W3C home > Mailing lists > Public > www-style@w3.org > April 2007

Re: [CSS 2.1] Margins and absolutely positioned elements

From: Øistein E. Andersen <html5@xn--istein-9xa.com>
Date: Sat, 07 Apr 2007 19:34:36 +0200
To: www-style@w3.org
Message-Id: <E1HaEo8-000OSQ-PW@node1-4.ouvaton.local>

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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:50 GMT