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;:


Here's the HTML:

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

Here's the CSS:

#box09644 {
 border:solid thin blue;

#offset80239 {
 border:solid thin pink;

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


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]


Visual formatting model#absolutely-positioned

Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Reference
  5. DOM Scripting
  6. SVG
  7. Blog