Sent by Philippe Wittenbergh on 6 February 2010 03:03
On Feb 6, 2010, at 7:35 AM, Yoink Boink wrote:
> Ah yes, thanks, margin collapsing makes sense.
> I just never thought the body would get 'pushed down' as well + assumed the
> abs positioning starts at top leftmost point always of the parent div +
> avoiding margins (doh, wronngg)...
At the top - left of the padding-edge of the parent div, assuming the parent div has 'position:
relative' and is thus the containing block.
<http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>
> Curious after i adding 1px padding ( or of course borders, or new browsers
> overflow:hidden;) then the red absolutely positioned div shows up where i
> expect it to...
> but if i put html {background: lime;}, i dont quite understand what is going
> on lol... the abs positioned box disapears. lime bk shows up at bottom so
> not sure how the html element affected,
If you don't specify a background-color for the html element (= root element), then the
background-color of <body> is propagated to the viewport. That is, the background-colour as defined
on your body element will be painted all over the window.
<http://www.w3.org/TR/css3-background/#special-backgrounds>
If however you specify a background-color for the root element, then the background-color for <body>
will only paint the area covered by <body>. If the document only contains one line of text, then
<body> will only be as tall as that one line. The body element is just a normal div with a special
name.
As for your absolute positioned element, it disappears behind the body element given your
body {position: relative;}
In your test case, you have
#picture {
position: absolute;
z-index: -1;
}
The negative z-index is pulling that element behind the body element (which has a z-index of auto as
it is not specified - in practical terms, for _this_ test case, this is equivalent to '0')
<http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index>
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
