CSS: Position Absolute

What is Position Absolute

• position:absolute makes an element x go 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 the first parent element that has a position property value other than static. If none, it is relative to the Root Element.

Example

Code

<div id="box-a-592">
 <div>AAA</div>
 <div id="box-b-702">BBB</div>
 <div>CCC</div>
</div>

#box-a-592 {
 position: relative;
}

#box-b-702 {
 position: absolute;
 top: 8px;
 left: 30px;
 color: red;
}

Example: Text Over Image

• CSS: Text Over Image