Hey Grant,
Ok, this is a hard one to explain simply, but here goes:
Your "position: relative" container is being affected by margin
"escaping" (top margins escape out of the parent container), while
your "position: absolute" container is not being affected.
Here is a more detailed explanation (using some of the components
from your original question):
------------------------------
TEST 1
------------------------------
http://maxdesign.com.au/jobs/grant-bailey/index.htm
HTML
<div id="div_content">
<div id="div_omega">
<h1>
I am the omega
</h1>
</div>
</div>
CSS
#div_content { background: lime; }
#div_omega { background: blue; }
h1 { margin: 1em 0; background: yellow; }
- The #div_content has a lime background
- The #div_omega has a blue background
- The <h1> has a yellow background as well as 1em of margin above and
below.
RENDERED
- You should see the <h1> content and it's yellow background.
- You should NOT see is the #div_content or it's lime background.
- You should NOT see is the #div_omega or it's blue background.
Why won't you see the #div_content or #div_omega? It's because the
top margin on the <h1> is "escaping" out the top of both of these two
containers and they are wrapping tightly around the <h1> itself -
making them both "invisible".
------------------------------
TEST 2
------------------------------
http://maxdesign.com.au/jobs/grant-bailey/index2.htm
In this case, the only difference is that #div_content also has
"border-top: 1px solid red;". As soon as this occurs, the <h1>'s top
margin is trapped inside #div_content. Then, the background of
#div_content is visible. You should see #div_content's lime
background (as well as the thin red border above).
This is normal margin behavior. You can trap descendant's margins
using border or padding.
------------------------------
TEST 3 & 4
------------------------------
http://maxdesign.com.au/jobs/grant-bailey/index3.htm
http://maxdesign.com.au/jobs/grant-bailey/index4.htm
The only difference in these two cases from the tests above is that
#div_omega (the parent of the <h1>) is set to "position: relative;".
As you can see, it makes no difference. The <h1> top margin escapes
if no border is on top of #div_content (see index3.htm) and is
trapped if the border is present (see index4.htm).
We still have not seen #div_omega or it's blue background. (If we had
put the "border-top: 1px solid red;" on #div_omega we would have seen
this element and not #div_content).
------------------------------
TEST 5
------------------------------
http://maxdesign.com.au/jobs/grant-bailey/index5.htm
In this test, #div_omega (the parent of the <h1>) is set to
"position: relative;". As soon as this happens a few things change:
1. #div_content disappears except for the border-top. This is correct
behavior as without any content in flow, the container will simply
collapse.
2. we can see #div_omega and it's blue background.
3. More importantly, we can see that #div_omega is wrapping around
the top and bottom margins of the <h1> element.
------------------------------
WHAT DOES THIS MEAN
------------------------------
These rough tests show that regardless of whether #div_omega is "in
flow" as in test 1 and 2 or set to "position: relative" as in test 3
and 4 - the margin "escaping" issue is still the same.
However, as soon as #div_omega is set to "position: absolute", the
margin "escaping issue" is not relevant.
Does all of this make sense? I hope so. :)
Russ
On 27/06/2009, at 1:46 AM, Grant Bailey wrote:
Hello,
I have a question about collapsing margins. I realise that the margins
of relatively and absolutely positioned elements are not supposed to
collapse, but I've come across an example that appears to break this
rule. I'd be grateful if someone could clarify what is going on.
My issue is that, in all major browsers, the margin of the h1 of
#div_omega collapses with the margin of body, even though
#div_omega has
been relatively positioned. Furthermore, adding padding to the body
does
not seem to fix the problem.
Grant Bailey
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
