CSS Position

CSS Position: Relative, Absolute, Fixed, and Sticky Layouts

The CSS position property controls how an element sits inside normal document flow or detaches to anchor relative to a parent card, the browser viewport, or scroll position. Paired with top, right, bottom, left, and z-index, position builds sticky headers, notification badges, and modal overlays.

flowchart TD
    P["CSS position"] --> S["static (Default document flow)"]
    P --> R["relative (Offset from own spot; anchor for children)"]
    P --> A["absolute (Anchored to nearest positioned parent)"]
    P --> F["fixed (Locked to browser viewport)"]
    P --> ST["sticky (Scrolls normally, then sticks at threshold)"]

Comparing the Five Position Modes

• static: Default value; ignores top, left, and z-index.
• relative: Stays in normal layout space while nudging visually with offsets—and crucially creates a coordinate anchor for position: absolute child elements.
• absolute: Leaves normal layout flow and anchors to the nearest ancestor whose position is not static (or the viewport if none exists).
• fixed: Pins to the browser viewport even while scrolling—ideal for floating chat widgets or full-screen modal backdrops.
• sticky: Acts relative until scrolling hits top: 0;, then sticks inside its parent container.

.product-card {
    position: relative;
    padding: 20px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

.sale-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: #dc2626;
    color: #ffffff;
    padding: 3px 8px;
    font-size: 0.75rem;
    border-radius: 4px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #ffffff;
}

Common Mistakes to Avoid

• Using position: absolute without position: relative on the parent: Without a positioned parent, your badge flies up to the top-right corner of the whole browser window.
• Putting overflow: hidden on an ancestor of position: sticky: Overflow clipping breaks sticky headers silently; use overflow-x: clip; if needed.
• Setting z-index on static elements: z-index works only on positioned elements (relative, absolute, fixed, sticky) or Flex/Grid items.

Frequently Asked Questions

Why is position: sticky preferred over fixed for top navbars?

sticky keeps the header inside normal document flow so you do not have to add fake padding-top to body to stop content from hiding underneath it.

What does inset: 0 mean in modern CSS?

inset: 0; is shorthand for top: 0; right: 0; bottom: 0; left: 0;, great for stretching full-screen modal backdrops.