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.
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:
absolute: Removes the element, including any child elements, completely from the flow of the document, and positions it at the offsets defined in the same style rule. If the element is nested inside another positioned element, the offsets are calculated with reference to the positioned parent. Otherwise, the offsets are calculated with reference to the page.
Example showing two absolutely positioned elements, one nested inside the other. If the browser window is less than 900px wide, the nested element is hidden partially off-screen.fixed: Similar toabsolute, but the offsets are always calculated with reference to the browser viewport.
Example showing a fixed page heading and navigation bar. The final menu element drops down below the rest of the navigation bar if the browser window is less than 980px wide. You could give the navigation bar a fixed width, but this would prevent access to the final menu item unless the browser window is expanded to reveal it.relative: Moves the element relative to its normal position in the document flow, but without affecting the position of other elements. Example
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.