On 19/11/2010 4:37 AM, Thierry Koblentz wrote:
Hi Tim,
The red
box *and* the document have nothing to do with the offset of that
box.
Not entirely true. Yes, the blue box is offset in relation to where it
would be without position. But "where the blue box would be" depends
directly on other elements (previous siblings and parents, i.e, the red
box, and the document). and since we're only changing the left
position, the only thing that affects that is the document, making the
"offset in relation to the document" a fair statement.
I don't think you can "explain" relative positioning that way, because
that's true for any positioning value, but fixed.
The offset (200px in that example [1]) is not in relation to the document.
Example [1]. I'm lost.
If it was the case, a left-margin or a left padding on the reddish box
should have no effect on the blue box. If such styling has an effect on the
box, it is because that blue box is offset from *its* normal position in the
flow.
It's normal position is it's static position.
*its* position, not the position of siblings, or document, etc. That's
the reference point for the 200px, nothing else.
[1] http://www.alistapart.com/d/css-positioning-101/example_d.html
An interesting thing about this test is that if a margin is given to the
blue box, only the margin-top and margin-left changes things with the
current height and width of the red box.
A value of margin-left: 100px visually shifts the blue box to the right
from it's static position by 100px.
A value of margin-top: 100px collapses through into it's parent being
the red box. The red box is pushed down by 100px. The blue box is
positioned on the same y-axis as the red box.
The red box physical height is due to the height of it's content, that
being the blue box. If no height is given on the red box, then for the
blue box, a value of margin-bottom: 100px collapses through into it's
parent being the red box. The yellow box is then pushed down by 100px.
A value of margin-right: 100px has little affect but this is also true
with a value of margin-right: 5000px since it can only disappear into
the overflow on the right. Margins are clipped inside boxes that behave
as overflow:auto.
The article fails to mention about how position:relative can generate a
new containing block for descendants elements with a position value of
either absolute or fixed.
A also not one of the comments.
| "I never realized quite how redundant the CSS spec is.
| The final two lines of this selection are almost insultingly
| pointless and unhelpful."
CSS can only be redundant if you do not use it. The commenter quotes
this as the final two lines.
| “Boxes in the normal flow belong to a formatting context,
| which may be block or inline, but not both simultaneously.
| Block boxes participate in a block formatting context. Inline
| boxes participate in an inline formatting context.”
A block formatting context is a very misunderstood concept of CSS.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
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/
