Absolute positioning
A box that are absolutely positioned is positioned with respect to its containing block and is completely removed from the normal flow.
- Content within the absolutely positioned element will have normal flow.
- The location of the element will be with respect to the containing element which "has position". An element is given position by having its position set to something other than "static."
- Absolutely positioned blocks are on their own layer and so may obscure or be obscured by other layers, depending on their "z-level" value.
Example
Because XHTML is heirarchical (remember "things within things") each element is contained in some higher level element. An absolutely positioned element will be placed in the first higher level containing element that has a position value other than "static". In the diagram below, Text A has been given an absolute position. Since Div B has position:relative, the Text A element will be located within Div B.
<div style="width: 600px; border: solid #ccc 1px; position: relative; background: yellow;"> <p><b>Div A:</b> This division has <br /> position set to relative</p> <div style="width: 500px; border: solid #8cf 1px; margin: 2em; position: relative; height: 12em; background: cornsilk;"> <p><b>Div B:</b> This division has <br /> position set to relative</p> <p style="width: 300px; border: solid #fc8 1px; width: 100px; background: cyan; position: absolute; top: 15px; right: 15px;"> <b>Text A:</b> This paragraph has <br /> position set to absolute</p> </div> </div>
Div A: This division has
position set to relative
Div B: This division has
position set to relative
Text A: This paragraph has
position set to absolute
If we change Div B to position:static (the default) then Div A is the first higher level element that has position, so Text A locates itself relative to Div A.
<div style="width: 600px; border: solid #ccc 1px; position: relative; background: yellow;"> <p><b>Div A:</b> This division has <br /> position set to relative</p> <div style="width: 500px; border: solid #8cf 1px; margin: 2em; position: static; height: 12em; background: cornsilk;"> <p><b>Div B:</b> This division has <br /> position set to static</p> <p style="width: 300px; border: solid #fc8 1px; width: 100px; background: cyan; position: absolute; top: 15px; right: 15px;"> <b>Text A:</b> This paragraph has <br /> position set to absolute</p> </div> </div>
Div A: This division has
position set to relative
Div B: This division has
position set to static
Text A: This paragraph has
position set to absolute
Absolute positioning for layout
In the absolute positioning layout example, the nav and sidebar blocks have been positioned on the right. Their positions are fixed. If the sidebar news box is too long, it will obscure (or be obscured by the nav content.