Jared Stein wrote: > Hey all, I teach web design and dev courses at the college level and often > steer students away from absolute positioning as a first-choice CSS layout > solution in favor of float. > > I've read John Faulds' post on the pitfalls of abs pos here > http://csscreator.com/node/11291 and use this as a "summary" of the > discussion for my students. > > Do any of you know of other hearty debates on the matter that would > illuminate students who will likely enter the professional web design/dev > field? Other opinions not covered in the CSSCreator thread? > > -- > Jared M. Stein > Director of Instructional Design Services > Utah Valley University
I would think it is wise to explain the difference between the 'initial containing block' and 'containing block'. The initial containing block is established by the viewport [1]. "The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. The 'direction' property of the initial containing block is the same as for the root element." So absolutely positioned elements are offset (left, right, top and bottom) from this initial containing block (viewport) unless it has an ancestor with position relative, absolute or fixed [1]. "If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed." If no offset is given, then the offset is treated as 'auto'. Absolutely positioned elements with offset 'auto' are positioned in respect to the direction of overflow. The default 'rtl' (bidirection) allows content to overflow the viewport to the right and bottom. For 'ltr' the horizontal overflow works in reversed. Below are some test cases. Note how the body has a background of white and the html has a background of blue. <http://css-class.com/test/css/bidi/visible-overflow-containing-block-ltr-ap-left.htm> Things that are not mentioned in the CSSCreator Thread are the position of absolutely elements with offset of auto when interacting with inline elements [2] or floats [3]. Another is the use of absolute positioning for 'source ordering'. A simple construction is this. <body> <div id="content"> .. </div> <div id="navigation"> .. </div> <body> body { margin: 0; } #content { margin-top: 100px; } #navigation { position: absolute; top: 0; height: 100px; width: 100%; } 1. <http://www.w3.org/TR/CSS21/visudet.html#containing-block-details> 2. <http://css-class.com/test/bugs/ie/calculated-offset-bug1.htm> 3. <http://css-class.com/test/bugs/ie/calculated-offset-bug2.htm> -- 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/
