Skip to main content

Getting StartED with CSS

Positioning Properties

These properties permit elements to be removed from the normal flow of the document and positioned as though floating on separate layers in front of other content. CSS positioning is an advanced subject, covered in detail in Chapter 10.

bottom, left, right, top

Accepted values:
A percentage, size with a unit of measurement, or the keyword auto
Default:
auto
Inherited:
No

Offsets that determine the position of the element in relation to the sides of its containing block. They apply only to elements that are positioned using absolute, fixed, or relative positioning.

The containing block of a fixed-position element is the browser viewport. For other positioned elements, it is the element’s first ancestor that has the position property set to absolute, fixed, or relative. In the absence of such an element, the document becomes the containing block.

The keyword auto sets the offset to the position the element would have had in the normal flow of the document.

clip

Accepted values:
rect(), auto
Default:
auto
Inherited:
No

Defines the area of an absolutely positioned element that remains visible. Performs a similar function to the crop tool in a graphical editor, but in a non-destructive way. The area to be displayed is defined by entering four sizes with a unit of measurement between the parentheses of rect(). The values passed to rect() should be offsets measured from the top-left corner of the absolutely positioned element that you want to clip, and should be in clockwise order starting from the top.

According to the specification, the values passed to rect() should be separated by commas. However, this is not supported by IE6 and IE7. Fortunately, other browsers support leaving out the commas.

Example

position

Accepted values:
absolute, fixed, relative, static
Default:
static
Inherited:
No

Defines how an element should be positioned. The default value, static, displays the element in the normal way. Because the position property is not inherited by default, the only time you need to specify its value as static is if you need to override an existing value. For example, when creating a print style sheet that inherits styles from another style sheet, it’s a good idea to set position to static for absolutely-, fixed-, and relatively-positioned elements to make sure they print out correctly.

The other values have the following effects:

z-index

Accepted values:
An integer (whole number) or the keyword auto
Default:
auto
Inherited:
No

Sets the stacking order of absolutely-, fixed-, and relatively-positioned elements. When such elements overlap, those with a higher z-index value appear in front of those with a lower one. If no z-index is specified, positioned elements are stacked in the same order as they appear in the underlying HTML, with those appearing first at the bottom of the stack.

Each containing block sets its own stacking context. When positioned elements from different stacking contexts overlap, the z-index of the containing block determines which appears on top. This can lead to a situation where an element with a z-index of 2 will appear in front of one with a z-index of 2000, if the z-index of the first element’s containing block is higher than the z-index of the second element’s containing block.

Example