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:

AAA
BBB
CCC

Here is the HTML:

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

Here is the CSS:

#box09644 {
 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

CSS Layout

CSS Layers

JavaScript Using Css Layers

CSS

Basics

Selectors

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc