Position Offsets
The four offset properties position an element from its containing block's edges. Setting opposite offsets (top + bottom or left + right) stretches the element.
CSS
Intermediate
4 min read
top, right, bottom, left Offsets
Example
/* Stretch to fill parent (use with position: absolute) */
.overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* Shorthand: */
inset: 0;
}
/* Offset from specific edges */
.badge {
position: absolute;
top: -8px; /* Above parent */
right: -8px; /* Outside parent right edge */
} Pro Tip
Use inset: 0 instead of top: 0; right: 0; bottom: 0; left: 0 for overlay elements — it is a clean shorthand.