Status of this document

This is a W3C Working Draft for review by W3C members and
other interested parties. It is a draft document and may be
updated, replaced or obsoleted by other documents at any time. It
is inappropriate to use W3C Working Drafts as reference material
or to cite them as other than "work in progress". A
list of current W3C technical reports can be found at http://www.w3.org/pub/WWW/TR.
Since working drafts are subject to frequent change, you are
advised to reference the latter URL, rather than the URL for this
working draft.

This document is an intermediate draft produced by the W3C
HTML Editorial Review Board as part of the Stylesheets Activity; it is stable enough
to be released for public comment but may change before approval as
(part of) a recommendation. Hence it should not be implemented as part
of a production system, but may be implemented on an experimental
basis.

The HyperText Markup Language (HTML) is a simple markup
language used to create hypertext documents that are portable
from one platform to another. HTML documents are SGML documents
with generic semantics that are appropriate for representing
information from a wide range of applications. CSS (Cascading
Style Sheets) is a style sheets language that can be applied
to HTML to control the style of a document: which fonts and
colors to use, how much white space to insert, etc. The following
specification extends CSS to support the positioning and
visibility of HTML elements in three-dimensional space.
Familiarity with both CSS1 and HTML 3.2 are
assumed.

The inability to explicitly control the positions of HTML
elements has become a stumbling block for producing rich static
HTML documents. There is an even greater need for powerful layout
control to enable dynamic, animated HTML-based content. This
document describes extensions to CSS that allow authors to
exercise greater accuracy in page description and layout for both
purposes.

This document introduces two methods of positioning HTML
elements using the new 'position' attribute: 1) 'relative' positioning
may be offset relative to their natural position in the
document's flow, and 2) 'absolute' positioning may be
positioned arbitrarily. These elements establish a new context
for the flowing of contained HTML elements, and establish a
coordinate system for positioning of child elements. The examples
below will clearly demonstrate these features. Dynamic aspects of
managing positioned elements such as hiding, displaying and
movement can only be performed using an external scripting
language.

Elements with 'absolute' positioning are rectangular areas
into which the contents of the positioned element will flow. An
'absolute' positioned element and its parent element are laid out
independently, without regard for each others' 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 a
element with a lower z-order. 'Absolute' positioned elements know
nothing about one another. By default, a positioned element will
be placed just above (in z-space) its parent.

They define a new rectangular plane into which their
contents are flowed, just as the HTML inside the
<BODY> element flows into the default container.

They are positioned within their parent element's
coordinate system 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 outer edge of the parent element. The height,
if not specified, will be just large enough for the
contents of the element.

They define a new coordinate system for positioning of
child elements. This coordinate system has its origin at
the top, left corner of the element.

'Relative' positioning contents are flowed into the parent
element just like any other HTML. This type of positioning allows
an element to retain its "natural" formatting, while
supporting features similar to 'absolute' positioned elements,
such as:

the ability to adjust the z-order relative to other
elements that may occupy the same area.

the ability to position child elements relative to the
element, perhaps under- or overlaying the contents of the
element.

the ability to dynamically move or hide the element using
a scripting language.

Like 'absolute' positioned elements, 'relative'ly positioned
define a new coordinate system for child elements, with the
origin located in the position where the first child element is
rendered. Consider the following example:

When 'top' and/or 'left' properties are used in conjunction
with a 'relative' positioned element, the contents are offset
relative to its original position, rather than being positioned
relative to the parent coordinate system as with 'absolute'
positioned elements. The element keeps its original,
"flowed" shape. Thus, any line breaks will be retained
when the 'relative'ly positioned element is moved. Dynamic
movement of 'relative'ly positioned elements can provide
animation effects in scripting environments. Static positioning
can 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. Consider the following
example:

Example 3

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.

Using 'auto' for the value of the 'top' property, an
'absolute' positioned element may be used to display change bars
as follows:

Example 4

<SPAN STYLE="position: relative; left: 10;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing the following
<SPAN STYLE="position: absolute; left: -10; color: red;">--</SPAN>
word.</SPAN>

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 the following word. |
| |
| |
| |
| |
+-----------------------------------+

'Static' positioning is identical to normally rendered HTML.
These elements cannot be positioned or repositioned, nor do they
define a coordinate system for child elements. This is the
default value for 'position', except for the <BODY> element, which, while it
cannot be positioned, does define a coordinate system for child
elements.

Example 5

Compare this example to Example 2.
The only difference in the CSS is that in this case the outer
element is static, rather than in-flow.

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.

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:

Pressing either form button invokes a user-defined script
function that causes the corresponding element to become visible
and the other element to be hidden. Because the elements
positioning is 'relative', they have no effect on the document's
layout. The HTML contained in each element is laid out within the
flow of the enclosing block, just as it normally is. A more
visually appealing version of the above might be designed using
overlapping 'absolute' positioned elements:

In this example, 'container2' has the same origin as
'container1', and it occupies the same area. Note also that the
visibility property has been used to specify that 'container2' is
initially invisible. The scripted event handler of the 'Capone'
button can hide 'container1' and show 'container2'. Since the
containers occupy the same position, and are the same size, the
effect is that of one replacing the other.

By default, the z-ordering of elements in a document is
back-to-front in the order they appear in the HTML. In Example 8,
therefore, 'container2' will be stacked immediately above
'container1', since it appeared after 'container1' in the
document. It is possible to explicitly specify a element's
z-order, relative to other containers, through the 'z-index'
property. For example:

Example 9 also demonstrates the notion of transparency. The
default behavior of an element is to allow elements below it to
be visible through transparent areas in its HTML content. In this
example, each element transparently overlays the elements below
it. This behavior can be overridden by utilizing one of the
existing background-related properties like 'background'.

'Relative' Positioned elementshave their origin
located at the top-, leftmost extent of the first rendered line
of the element's contents. Subsequent lines of the 'relative'ly
positioned element may extend to the left of the origin (such as
when the element's contents start in the middle of a line).

For elements with 'absolute' positioning, 'left' and 'top' are
relative to the origin of the nearest element with 'position' of
value 'absolute' or 'relative'.

For elements with 'relative' positioning:

'left' and 'top' are relative to the normally rendered
position of the element

the space reserved for the normally rendered element does
not move with the element. When the contents of these
elements are moved, they may obscure any content below
them depending upon the corresponding z-index attribute.
These element's maintain their original shape, including
line breaks, if any.

if the element is moved, the origin it defines for child
elements moves with it. Elements that are positioned
'relative' within another 'relative' element will move
when the parent 'relative' element is moved.

The default value ('auto') is the element's normal position in
the flow. This value is calculated by the UA for positioned
elements, and is 0 (no offset) for 'relative' positioned
elements.

The 'auto' value of the width property is such that the
right edge of the positioned element is placed
immediately inside the right
outer edge of its enclosing element. If this places
the right edge of the element to the left of its left
edge, the width is set to zero.

Percentage values can be specified for both 'height' and
'width', and are computed with respect to the height and
width of the element which defined the coordinate system
within which the positioned element is being placed.
However, specifying a percentage value for 'height' if
the parent element's height is set to 'auto' has
undefined behavior.

Clipping alters the display of HTML, though it does not affect
how it is laid out. The clipping region defines that part of the
element that is visible. It is computed by the intersection of
the parent's clip region with the value of a element's 'clip' and
'overflow' properties. Any part of an element that is outside its
clipping region, including its border and padding, is
transparent.

Coordinates are with respect to the element's origin. Negative
coordinates are permitted. When converted to pixel coordinates,
the bottom-right corner is excluded from the clipping rectangle.
This rule is necessary to permit the definition of zero-width or
zero-height rectangles.

Any coordinate can be replaced by the value 'auto', which
causes the clipping rectangle to match the element's extent in
the given direction, including padding, borders and child
elements. The default value for the 'clip' property causes the
clip rectangle to cover the entire element.

For now, all clipping regions are rectangular. We anticipate
future extensions to permit non-rectangular clipping.

Note: If the clipping region exceeds the bounds of the UA's
document window, contents may be clipped to that window by the
native operating environment.

'Overflow' determines what happens when an element's contents
exceed its height or width. A value of 'none' indicates that no
clipping is to be performed. For example, preformatted text that
extends past the right edge of an element's boundaries would be
rendered anyway. A value of 'clip' indicates that clipping should
be performed with no scrolling mechanism. The behavior of the
'scroll' value is UA-dependent, but should cause a scrolling
mechanism to be invoked.

Note: Even if 'overflow' is set to 'none', contents may be
clipped to a UA's document window by the native operating
environment.

The 'z-index' property is used to specify the stacking order
of elements, overriding the default behavior, which is to stack
them bottom-to-top in the order they appear in the HTML source.
The 'z-index' property allows an element's z-order to be given as
an integer that specifies stacking order relative to sibling and
parent elements:

Elements that have negative 'z-index' values are stacked
below their parent element and elements with positive
'z-index' values are stacked above their parent element.
In other words, each 'absolute' or 'relative' positioned
element defines a context for z-order in which their own
'z-index' is 0.

The relative z-ordering between two elements that are not
neither siblings nor parent/child can be determined by evaluation
of the above rules for both elements' ancestors.

Visibility determines the initial display state of an element,
but does not affect its layout. Elements that are hidden still
take up the same physical space as they would were they visible,
they are just rendered transparently. This differs from the
behavior of 'display:
none', in which the element is ignored, as if it were not
present in the document at all. Visibility can be used in a
scripting environment to dynamically display only one of several
elements which overlap one another.