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
***
