Absolute Positioning
position: absolute removes the element from normal flow and positions it relative to the nearest positioned ancestor. If none exists, it is relative to the viewport (initial containing block).
CSS
Intermediate
5 min read
position: absolute
Example
.parent {
position: relative; /* Establishes positioning context */
width: 300px;
height: 200px;
background: #e9ecef;
}
.child {
position: absolute;
top: 0;
right: 0; /* Top-right corner of .parent */
background: #007bff;
color: white;
padding: 4px 8px;
} Pro Tip
Always pair position: absolute with position: relative on the intended parent, or it will position against the viewport.