Example D
<http://www.alistapart.com/d/css-positioning-101/example_d.html>
shows our new markup. Because of the new coordinate system, the blue
block measures its offset 200 pixels from the left of the red block
(|#box_1|) instead of the document.
Yes, and by placing #box_2 as a child of #box_1, it's default position
within the flow changes. Because it shares a y-coord in common with
#box_1, it shows up as adjacent to #box_1, as Example D clearly
indicates. Perhaps is wording isn't the best, but the example supports
his logic.
On 11/17/2010 2:59 PM, Thierry Koblentz wrote:
Hi Felix,
http://www.alistapart.com/articles/css-positioning-101/
Seemed interesting, until I got to the 5th reference to an invisible
example.
Where are they hidden, some offsite adserver/image host? I lost my
webdeveloper extension by upgrading my primary browser to a Gecko 2.0b.
<quote>
A coordinate system is a reference point for offset properties. Recall in
example C, our blue block (#box_2) is not sitting inside of any other
elements, so the coordinate system it's using to offset itself 200 pixels
from the left is the document itself. If we place the #box_2 element inside
of #box_1, we'll get a different result, as #box_2 will position itself
relative to the coordinate system from #box_1.
</quote>
This is plain wrong. Relatively positioned elements are not positioned in
relation to a containing block, but offset in relation to their own default
position in the flow. That #box_2 box would be at the same x coordinate if
it was moved into #box_1.
This article is not going to help people understand how things work. It is
going to confuse them and make them believe that it's a good idea to use
position for layout. :-(
I like the way the author writes though...
--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz
______________________________________________________________________
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/
______________________________________________________________________
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/
