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 class="box-aa">
 <div>aaa</div>
 <div class="box-bb">bbb</div>
 <div>ccc</div>
</div>

.box-aa {
 position: relative;
}
.box-bb {
 position: absolute;
 top: 0.5rem;
 left: 2rem;
 outline: solid 2px red;
}

Example: Text Over Image

• CSS: Text Over Image