CSS Positioning (Static, Relative, Absolute, Fixed & Sticky)

Positioning gives precise control over where elements sit on the screen relative to their parent or viewport.

static (Default): Normal document flow. Ignores top, left, right, bottom.

relative: Remains in normal flow, but allows offset with top/left. Acts as an anchor for absolute children!

absolute: Removed from normal flow. Positioned relative to the nearest positioned ancestor.

fixed: Positioned relative to the browser viewport. Stays in place when scrolling.

sticky: Toggles between relative and fixed based on scroll position.

⊞Code Example

.parent-card {

position: relative; /* Anchor for absolute children */

padding: 20px;

}

.close-button {

position: absolute;

top: 12px;

right: 12px;

}

.sticky-header {

position: sticky;

top: 0;

z-index: 50;

}