Delphinidin

The position property is used to give elements different types of positioning. Positioning gives you the ability to dictate with precision where in a document you want an element to appear. You can choose whether an element appears relative to a container element, or relative to the browser window. You can layer elements one on top of another. The following code outlines the position property and its values, and the four offset properties, top, right, bottom, and left, and their possible values.

position static | relative | absolute | fixed
Initial value: static

top <length> | <percentage> | auto
Initial value: auto

right <length> | <percentage> | auto
Initial value: auto

bottom <length> | <percentage> | auto
Initial value: auto

left <length> | <percentage> | auto
Initial value: auto

- Absolute Positioning
Absolute positioning allows you to render an element to a particular place in a document.

- Relative Positioning
Relative positioning is very similar to the default static positioning; elements to which relative positioning is applied do not leave the document fl ow. There are three differences between relative positioning and static positioning:

+ Elements with a relative position can be used as a point of reference for elements nested within them that are absolutely positioned.
+ The position of a relatively positioned element can be adjusted using the offset properties.
+ A relatively positioned element can have a position on the z-axis.

When no position is defined for any of an element’s ancestors, all elements are positioned relative to the browser’s viewport by default. If an element does have a relative, absolute, or fixed position and is the ancestor of an element with absolute positioning, that element is used as the point of reference for the absolutely positioned element.

- Applying Offset Positioning to Relatively Positioned Elements
The position of elements with relative positioning can be adjusted using combinations of the four offset properties, top, right, bottom, and left. For example, the top and left properties can be used to adjust the position of a relatively positioned element. This works similarly to the margin property that you saw in post before with one important difference — the space reserved by the element is not changed or moved within the document.

- Fixed Positioning
Fixed positioning is used to make an element remain in the same fixed position, even if the document is being scrolled. Alas, IE 6 does not support fixed positioning.

THE Z-AXIS AND THE Z-INDEX PROPERTY
The z-index property is used to control layering of positioned elements along an invisible z-axis, which you might imagine as an invisible line coming out of the computer screen. The following table outlines the z-index property and its possible values.

z-index auto | <integer>
Initial value: auto

The z-index property controls elements’ positions along the invisible z-axis, if those elements are positioned relative, absolute, or fixed. It is easy to get to the point where you have to specify very large z-index values if you don’t carefully keep control — as each new element must be placed above another, values go from 10 or less, to hundreds and then thousands! It is best to rely on management of z-index values than just having a free-for-all over which content appears on top. If you are working with other people to develop a site, decide from the start what content needs to appear on top and determine values accordingly.

Remember that elements inside a stacking context are isolated from the z-index values outside the context, so you can start back at 1. There is a good reason to keep z-index values below 100. Assistive technologies such as the speech recognition software Dragon NaturallySpeaking insert elements into the page which show the user the text that the software has recognized. These elements have a z-index of 100, so positioning content above this could interfere with your users’ ability to browse your site.

- The IE 6/IE 7 z-index Bug
IE 6 and IE 7 support the z-index property but with a bug that was fi xed for IE 8. Positioned elements with a z-index value of auto are given a z-index value anyway, starting at 0 and increasing by 1 for each positioned element in order. This means that every positioned element generates a stacking context.