CSS: Create Layer (position:absolute)

By Xah Lee. Date: . Last updated: .

What is Position Absolute

When an element x has position:absolute, x goes into its own layer. The normal flow of adjacent elements flows as if x does not exist.

The element x is positioned relative to its Containing Block.

A Containing Block is effectively the first parent element that has a CSS: Position Property value other than static. When no parent has it, then it is relative to the Root Element.

To specify the offset relative to the Containing Block, use:

Example

AAA
BBB
CCC

Code

<div id="bb078">
<div>AAA</div>
<div id="xx920">BBB</div>
<div>CCC</div>
</div>
#bb078 {
 position:relative;
}

#xx920 {
 position:absolute;
 top:8px;
 left:30px;
 color:red;
}

Example: CSS: Text Over Image

CSS Layers