Sent by Adam Kuehn on 17 September 2004 22:10
>Roger Roelofs wrote:
> >> Given the following html:
>>>
>>>
>>> <div id="wrap">
>>> <div id="header"></div>
>>> <div id="nav"></div>
>>> <div id="sheet"></div>
>>> <div id="footer"></div>
>>> </div>
>>>
>>> Let's say I want to exchange the positions "nav" and "header". I give
>>> "wrap" relative positioning and I set "nav" to absolute 0,0. So far so
>>> good. "Nav" has moved up over "header."
>>
>> I would use padding-top on #wrap. I'm not sure why the margin-top on
> > the #header didn't work, but I'm sure someone will tell us why :)
It must be a bug.
In this example, #wrap is relatively positioned. Absolutely
positioned elements are offset with respect to their containing
block. [1] [2] But if you check the details of what that means [3],
you'll see that for an absolutely positioned element, the containing
block begins at the padding edge of the nearest ancestor with a
position of "absolute", "relative" or "fixed". Siblings should have
no effect. So in your original example, #nav should be exactly
coincident with the top edge #wrap, regardless of any margin on its
sibling element #header. As you indicated, the siblings padding
should push down the #header and succeeding elements in the normal
flow.
In fact, if you use padding-top on #wrap, that should push everything
down the way you *don't* want, since now #nav should start at the
padding edge of #wrap, or down 50px. #header would begin in its
normal position just inside the padding, as well, so #nav and #header
should overlap.
It seems to me that Gecko is getting this exactly backwards, unless I
am horribly misreading something.
[1] <http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme>
[2] <http://www.w3.org/TR/CSS21/visuren.html#containing-block>
[3] <http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>
--
-Adam Kuehn
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
