Margin collapsing and auto 'top' for abs pos (was Re: Transitioning top and bottom properties.)

On Wed, 01 Jun 2011 20:42:32 +0200, Alan Gresley <>  

>> I suppose the others (IE8, Fx
>> nightly, Chrome dev) are making an inaccurate "guess at its probable
>> position", which the spec allows...
> Øyvind, can you please define to me what an inaccurate guess is? I do  
> think that using the words inaccurate and guess together in the same  
> sentence is quite amusing.

Well, I mean a guess that doesn't equal the correct answer, basically.

>    | More precisely, 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
>    | specified 'position' value had been 'static' and its
>    | specified 'float' had been 'none' and its specified
>    | 'clear' had been 'none'.
> Note the word _containing block_.

Well, that's just because the containing block is what 'top' is offset  
 from (for absolute position).

> Now take this markup and CSS.
>    <div id="float" style="float: left">
>      <div id="ap">Absolute</div>
>    </div>
> Since the parent of the absolutely positioned element is a float (a  
> property that establishes a BFC), then it's containing block is the  
> float.

Well, if #ap is position:static then its containing block is the content  
edge of #float's box, but it doesn't matter if #float is  
floated/establishes a BFC or not. If #ap is position:absolute then its  
containing block is established by the nearest positioned ancestor or by  
the initial containing block if no such ancestor exists. Its  
/static-position containing block/ is established by #float, though.

> Opera ignores this completely since it will always absolutely positioned  
> an element with respect to border-box of the <body> element regardless  
> of if there is _margin collapse or not_ if the root element is the  
> 'initial containing block'.

That doesn't sound like an accurate description.

> Here is a test.
> Note the position of the top edge of the absolutely positioned element  
> when you hover (also think of transitions and animation) the box with  
> the word "Hover Me". All other browser correctly places the AP element  
> at the bottom the box with the green border and overlaps the  
> border-bottom (beginning at the top edge if this border).
> Opera positions the top edge of the AP element by the height of the  
> margin-top of the AP element which is margin-top: 3em.

Right, it doesn't seem to take into account the h1 that appears later in  
the document, or something. I'll make sure this is filed as an issue,  
though I don't know how easy it is to fix.

Øyvind Stenhaug
Core Norway, Opera Software ASA

Received on Friday, 3 June 2011 13:18:50 UTC