clip
Value: <shape> | auto
<shape>: rect (<top> <right> <bottom> <left>)
<top> <right> <bottom> <left>: auto | <length>
Initial: auto
Applies to: elements with the 'position' property of type 'absolute'.
Inherited: no
Percentage values: N/A

Clipping alters the display of HTML, though it does not affect how it is laid out. The clipping region defines what portion of the element's physical representation is visible. It is computed by the intersection of the parent's clipping region with the value of the element's 'clip' property.

Lengths are specified with respect to the element's top-left corner. Negative values 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 length can be replaced by the value 'auto', which causes the respective extent of 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 encompass the entire element. In effect, 'auto' provides for an infinite clipping region.

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 browsers document window, contents may be clipped to that window by the native operating environment.

width, height
Value: <length> | <percentage> | auto
Initial: auto
Applies to: block-level and replaced elements, elements with 'position' property value of 'absolute'
Inherited: no
Percentage values: refer to parent element's width and height. If parent's height is 'auto', percentage of height is undefined.

For elements with 'position' of type 'relative' and 'static', the behavior of 'width' and 'height' is unchanged from that defined by the CSS1 formatting model.

For 'absolute' 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 inner 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 parent element. However, specifying a percentage value for 'height' if the parent element's height is set to 'auto' has undefined behavior.

left, top
Value: <length> | <percentage> | auto
Initial: auto
Applies to: elements with the 'position' property of type 'absolute' or 'relative'.
Inherited: no
Percentage values: refer to parent element's width and height. If parent's height is set to 'auto', percentage is undefined.

For elements with 'absolute' positioning, 'left' and 'top' are based on the current positioning context.

For elements with 'relative' positioning:

• 'Left' and 'top' are offsets to the normally rendered position of the element. For 'left', positive offsets are toward the right side of the document. For 'top', positive offsets are toward the bottom of the document. 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 elements maintain their original shape, including line breaks, if any.
• If the element is moved, its positioning context moves with it. Similarly, elements that are positioned 'relative' within another 'relative' element will move when the parent 'relative' element is moved.

overflow
Value: visible | hidden | scroll | auto
Initial: visible
Applies to: elements with the 'position' property of type 'absolute'.
Inherited: no
Percentage values: N/A

'Overflow' determines what happens when an element's rendered contents exceed its height or width.

A value of 'visible' indicates that the element's bounding box should be enlarged enough to contain all of its rendered contents. In other words, its height or width can be made bigger than the declared value. Any padding or border will remain outside the rendered content. Any additional width will be added in the direction of primary text flow, e.g. to the right side in left-to-right languages, while additional height will be added to the bottom.

A value of 'hidden' indicates that the element's contents should be clipped to its height and width, and that no scrolling mechanism should be provided. Padding and border will be applied to the regular height and width of the element, as if its contents did not exceed its bounds. Any contents that exceed the element's bounds will be unavailable to the user.

The behavior of the 'auto' value is browser-dependent, but should cause a scrolling mechanism to be invoked when the element's rendered contents exceed its bounds.

Finally, the 'scroll' value indicates that if the UA supports a visible scrolling mechanism, that mechanism should be displayed whether or not the element's rendered contents exceed its bounds. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment.

Note: Even if 'overflow' is set to 'visible', contents may be clipped to a UA's document window by the native operating environment. In addition, the 'clip' property can cause otherwise visible "overflowed" contents to be clipped.

The default value ('auto') represents the current position in the document at the time the element is rendered. This value is calculated by the UA for 'absolute' positioned elements, and is 0 (no offset) for 'relative' positioned elements.

position
Value: absolute | relative | static
Initial: static
Applies to: all elements
Inherited: no
Percentage values: N/A

Each variety of 'position' establishes one or more of the following:

• A new rectangular overlay, outside of the document flow, into which the element's contents are flowed (absolute)
• A box positioning context (absolute) or a Cartesian positioning context (relative) for absolutely positioned child elements
• A new clipping region for child elements (absolute)
• A position either within the current positioning context (absolute) or relative to the normally rendered position (relative)
• A z-order relative to the current positioning context (absolute, relative)

'Absolute' Positioned elements act like block-level elements from a CSS1 formatting perspective. However, since they fall completely outside of the normal document flow, the following CSS1 properties do not apply: 'float', 'clear', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'margin'.

visibility
Value: inherit | visible | hidden
Initial: inherit
Applies to: all elements
Inherited: if value is 'inherit'

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.

z-index
Value: auto | <integer>
Initial: auto
Applies to: positionable elements
Inherited: no
Percentage values: N/A

The 'z-index' property is used to specify the stacking order of positionable elements. The default ('auto') behavior is to stack them bottom-to-top in the order they appear in the HTML source within the current positioning context. The 'z-index' property allows an element's z-order to be given as an integer that specifies stacking order relative to its positionable sibling and parent elements:

• Sibling elements are stacked bottom-to-top in order of increasing 'z-index' value. Sibling elements with identical 'z-index' values have unspecified relative stacking order.
• 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 positionable element defines a positioning context for z-order in which their own 'z-index' is 0.

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

© 1995-1998, Stephen Le Hunte