Relative Positioning
position: relative offsets an element from its normal flow position without removing it from the flow. The space it occupied is still reserved.
It also creates a positioning context for absolutely-positioned children.
CSS
Beginner
4 min read
position: relative
Example
.nudged {
position: relative;
top: 5px; /* Moved 5px down from its normal position */
left: 10px; /* Moved 10px right */
/* Original space is still taken up in the layout */
}
/* Most important use: as anchor for absolute children */
.card {
position: relative; /* Creates positioning context */
}
.card .badge {
position: absolute; /* Positions relative to .card */
top: 8px;
right: 8px;
} Pro Tip
The main use of position: relative is not to offset elements — it is to establish a positioning context for absolute children.