Re: [CSS21] top margin edge - hence static position - is not well-defined

On 28/03/2011 12:31 AM, Anton Prowse wrote:
> 10.6.4 concerning the height of absolutely positioned elements says:
>
> # [...] the static position for 'top' is the distance from the top
> # edge of the containing block to the top margin edge of [...]
>
> But the vertical margin edges are not well-defined for elements whose
> margins participate in margin collapsing. This is most noticeable for
> self-collapsing elements, such as in the following test case in which
> there is no sensible relationship between the border box position of the
> "tricky" element (as determined by 8.3.1) and its 20px bottom margin:
>
> <div style="border-bottom:1px solid"></div>
> <div id="tricky" style="margin-bottom:20px">
> <div style="margin-top:10px"></div>
> </div>
> <div style="border-top:1px solid"></div>
>
> For the most part this glitch doesn't cause us any problem since the
> spec avoids (albeit probably unconsciously) identifying individual
> margin pieces from amongst a collapsed margin lump. However, 10.6.4
> relies on identifying the top margin edge of a box which may very well
> participate in margin collapsing.
>
> What should we do to fix this? Where should the absolutely positioned
> element be drawn in the following test case, and why?
>
> <div style="border-bottom:1px solid; margin-bottom:20px"></div>
> <div style="position:absolute; width:100px; height:100px; background:
> yellow; margin-top:10px"></div>
> <div style="border-top:1px solid; margin-top:20px"></div>
>
> There's no interop on this issue, but that's because Fx and IE don't
> perform tentative margin collapsing at all for abspos in order to
> determine their static position.


This is since the margins of elements with position absolute do not 
collapse [1] 8.3.1.


   | Margins of absolutely positioned boxes do not collapse
   | (not even with their in-flow children).


See this test case.


<http://css-class.com/test/css/visformatting/ap-static-position-margins1.htm>



1. <http://www.w3.org/TR/CSS21/box.html#collapsing-margins>


The lower box is not even needed to demonstrate but I have included 
example 2 which is the same as what you have above. If IE9 and FF did 
collapse these margins, then it would break 8.3.1.



-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Sunday, 27 March 2011 15:33:31 UTC