Name: Al Capone
Residence: Chicago
Beginning of body contents. Start of outer contents. Inner contents. End of outer contents. End of body contents.
Each example will declare different CSS styles for outer and inner. 2.1 'Absolute' Positioning Elements with 'absolute' positioning are formatted as rectangular overlays, outside the normal flow of the document, into which their contents flow. An 'absolute' positioned element is laid out independently of both its parent and child elements, without regard for their dimensions or position. For that matter, the layout of each 'absolute' positioned element is independent of any others. The contents of an element with a higher z-order may obscure the contents of an element with a lower z-order. Text in one positioned element cannot be flowed around an image in another positioned element. By default, a positioned element will be placed just above (in z-space) its parent. Example 1 Consider the following CSS declarations for outer and inner: #outer {position:absolute; top: 200px; left: 200px; width: 200px; color: red;} #inner {color: blue;} This results in something like the following: (0,0) +----------document window----------+(400,0) |Beginning of body contents. End of | |body contents. | | | | | | | | | | +-----------------+| | |Start of outer || | |contents. Inner || | |contents. End of || | |outer contents. || | +-----------------+| | | | | +-----------------------------------+(400,400) (0, 400) 'Absolute' positioned elements have the following characteristics: * They define a new rectangular context into which their contents are flowed, just as the HTML inside the element flows into the document window. * They are positioned within the current positioning context by means of the 'top' and 'left' properties. * Their height and width may be specified using the 'height' and 'width' properties. If the width is not specified, the element will extend to immediately inside the right inner edge of the parent element. The height, if not specified, will be just large enough for the contents of the element. Like floating elements, absolutely positioned elements are considered to be block-level in nature. * They define a box positioning context for child elements. Note: This draft does not specify the behavior of dynamic elements in scripting environments. For example, what happens when an element having 'width: auto' is repositioned? Do the contents reflow, or do they maintain their original formatting? The answer is outside the scope of this draft, and such behavior is likely to differ in initial implementations of CSS Positioning. The DOM-WG is addressing issues such as this. 2.2 'Relative' Positioning Elements with 'relative' positioning flow into place just like any other HTML, and can be positioned relative to their natural position within the document flow. When these elements are positioned, they keep their naturally rendered shape, including line breaks, and the space originally reserved for them remains. Any following elements do not reflow. Dynamic movement of 'relative' elements can provide animation effects in scripting environments. Relative positioning could also be used as a general form of super- and subscripting, although the line height will not be automatically adjusted to take the positioning into consideration. The following example, admittedly contrived, demonstrates relative positioning without utilizing a script: Example 2 BODY {line-height: 200%} #outer {position: relative; top: -12px; color: red;} #inner {position: relative; top: 12px; color: blue;} This results in the outer text being superscripted, while the inner text is subscripted relative to the outer text (but even with the normal body text). In the illustration below, the numbers to the left of the illustration indicate the normal position of the double-spaced lines. +----------document window----------+ | Start | 1|Beginning of body contents. | |of outer contents. | 2| Inner contents. | |End of outer contents. | 3| End of body | | | 4|contents. | | | 5| | | | 6| | | | 7| | | | | | +-----------------------------------+ 'Relative' positioned elements have the following characteristics: * Their contents flow naturally into position, just like "normal" HTML elements. * They can be positioned relative to their natural position in the document. This is most useful in scripting environments, where animation effects can be created through relative positioning. * They define a Cartesian positioning context for absolutely positioned child elements, with the origin located in the position where the element is initially rendered. 2.3 'Absolute' positioning relative to the flow Example 1 demonstrated absolute positioning in a box positioning context. That is, it demonstrated what happens when absolutely positioned elements are nested. The following example demonstrates an absolutely positioned element that is a child of a relatively positioned element. Instead of being positioned inside of a box, the element is positioned on a two-dimensional plane having its origin at the "logical beginning" of the relatively positioned element. In this example, the outer span is never intended to be explicitly positioned. Instead, relative positioning is used only to provide a local context for positioning a child element. Example 3 #outer {position: relative; color: red;} #inner {position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue;} This results in something like the following: (0,0) +----------document window----------+(0,400) |Beginning of body contents. Start | |of outer contents. End of outer | |contents. End of body contents. | | | | | | | | +----------+ | | |Inner | | | |contents. | | | | | | | | | | | +----------+ | | | | | +-----------------------------------+(400,400) (400,0) Note that 'inner' is positioned relative to 'outer', rather than being positioned within the default positioning context. 2.3.1 Implementing change bars with relative and absolute positioning Using 'auto' for the value of the 'top' property, an 'absolute' positioned element may be used to display change bars, as demonstrated by the example below. 'Auto' results in the element being placed at the "current" location in the document window, just as if the element were being flowed into that space. Example 4I used two red hyphens to serve as a change bar. They will "float" to the left of the line containing THIS -- word.
This might result in something like: +----------document window----------+ | I used two red hyphens to serve | | as a change bar. They will | | "float" to the left of the line | |-- containing THIS word. | | | | | | | | | +-----------------------------------+ 2.4 Static Positioning 'Static' is the default value for 'position'. Static elements cannot be positioned or repositioned, nor do they define a positioning context for child elements. Example 5 Compare the following to Example 3. The only difference in the CSS is that in this case the outer element is static, rather than relative. #outer {/* position: static; */ color: red;} #inner {position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue;} Since the static element does not establish a new positioning context, the inner element is positioned within the default positioning context: (0,0) +----------document window----------+(0,400) |Beginning of body contents. Start | |of outer contents. End of outer | |contents. End of body contents. | | | | | | | |------+ | |r | | |ents. | | | | | | | | |------+ | | | | | +-----------------------------------+(400,400) (400,0) 2.5 Floating elements Floating elements can already be created using CSS1, as demonstrated by the following example. We anticipate future extensions to the 'float:' property to allow more flexibility in flowing text around elements. Example 6 #outer {color: red;} #inner {float: right; width: 130px; color: blue;} (0,0) +----------document window----------+(0,400) |Beginning of body contents. Start | |of outer contents. End+-----------+| |of outer contents. |Inner || |End of body contents. |contents. || | +-----------+| +-----------------------------------+ 2.6 Visibility The 'visibility' property determines whether or not an element is initially displayed. In scripting environments, this property can be dynamically modified to hide or show an element. Unlike 'display: none', elements that are not visible still take up space--they are simply rendered transparently. Example: Example 7Choose a suspect:
Name: Al Capone
Residence: Chicago
Name: Lucky Luciano
Residence: New York
Choose a suspect:
Name: Al Capone
Residence: Chicago
Name: Lucky Luciano
Residence: New York