CSS: Absolute Position

By Xah Lee. Date: . Last updated: .

position:absolute make a element into its own layer. The normal flow of elements will flow as if that element doesn't exist.

It will be positioned relative to its “containing block”.

A “containing block” is effectively the first parent element that has a position value other than “static”. When no parent has any of “position” spec, then it is relative to the <html> element.

To specify the offset, use:

Here's a example of position:absolute with offset top:8px; left:30px;:

AAA
BBB
CCC

Here's the HTML:

<div id="container13508">
<div>AAA</div>
<div id="offset80239">BBB</div>
<div>CCC</div>
</div>

Here's the CSS:

#container13508 {
 position:relative;
 border:solid thin blue;
 width:300px;
}

#offset80239 {
 position:absolute;
 top:8px;
 left:30px;
 border:solid thin pink;
 color:red;
}

With no CSS, it displays in your browser like this:

AAA
BBB
CCC

You can see that, when using “position absolute”, the “BBB” div element disappeared from the normal flow.

It went into its own layer. And because we have top:8px;left:100px, so it's offset with respect to the upper left corner of the containing block.

You can also use bottom, or right, to specify offset.

You should not use top and bottom together. If you do, the top overrides the bottom. Similarly, you should not use left and right together. The left overrides right.

Remember, when using position:absolute, it is offset relative to its parent container block. A container block element is any that has one of:

〔►see CSS Position: static, relative, fixed, absolute

Reference

Visual formatting model#absolutely-positioned

Like what you read? Buy JavaScript in Depth