CSS Positioning: Static, Relative, Absolute, Fixed, and Sticky

CSS positioning lets you position elements anywhere on the screen, overlay modal dialogs, and create sticky navigation headers.

1. The 5 Position Values

static (Default): Follows the normal HTML document flow. Top, right, bottom, left properties have no effect.

relative: Positioned relative to its normal position. Keeps its original layout footprint in the document flow. Crucially acts as an anchor parent for absolutely positioned children!

absolute: Positioned relative to the nearest positioned ancestor (an ancestor with position: relative, absolute, or fixed). Removed from normal document flow.

fixed: Positioned relative to the browser viewport. Stays fixed on screen even when the user scrolls (e.g. floating action buttons, cookie banners).

sticky: Toggles between relative and fixed based on scroll position. Stays in normal flow until a scroll threshold (e.g. top: 0) is reached!

⊞Code Example

/* Sticky Navigation Bar */

.header-nav {

position: sticky;

top: 0;

z-index: 50;

background-color: #060c18;

border-bottom: 1px solid #1e293b;

}

/* Card with Floating Absolute Badge */

.card-container {

position: relative; /* Anchor parent */

background-color: #0c1328;

padding: 24px;

border-radius: 16px;

}

.hot-badge {

position: absolute;

top: -10px;

right: -10px;

background-color: #f43f5e;

color: #ffffff;

padding: 4px 10px;

font-size: 11px;

font-weight: 800;

border-radius: 9999px;

}