position

Basic Syntax

.element {
    position: relative;
    top: 10px;
    left: 20px;
}

Position alone does nothing. You need top, right, bottom, or left to actually move the element — except for static.

relative — Offset From Normal

The element stays in the flow, but you can visually shift it.

.card {
    position: relative;
    top: 10px;
    left: 20px;
}

When to use:

• To make an ancestor for absolute children (most common use).
• For subtle visual offsets without breaking the layout.
• To establish a stacking context for z-index.

absolute — Positioned to Ancestor

Removed from flow. Positions itself relative to the nearest positioned ancestor (any ancestor with position other than static).

.card {
    position: relative;  /* Establish the anchor */
}

.badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: red;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
}

fixed — Positioned to Viewport

Stays in the same screen position when scrolling.

.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #3b82f6;
    color: white;
    padding: 1rem;
    border-radius: 50%;
    cursor: pointer;
}

.fixed-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

The element is removed from flow — add padding or margin to other content to prevent overlap. On mobile, fixed can cause issues with the on-screen keyboard. Test carefully.

sticky — Sticks Until Parent Ends

Behaves like relative until the scroll position reaches a threshold, then behaves like fixed — but stays within its parent.

.sticky-header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

Requirements:

• Must have a top, right, bottom, or left value.
• Its parent must be taller than the sticky element.
• No ancestor can have overflow: hidden or overflow: auto between the sticky element and the scroll container.

z-index — Stacking Order

Controls which elements appear on top when they overlap.

.modal {
    position: fixed;
    z-index: 1000;
}

.tooltip {
    position: absolute;
    z-index: 100;
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
}

Rules:

• z-index only works on positioned elements (not static).
• Higher numbers appear on top of lower numbers.
• A new stacking context is created by position + z-index, transforms, filters, or opacity less than 1.

Common z-index scale:

• Base content: 0
• Dropdowns: 10–100
• Sticky headers: 100–500
• Modals: 1000+
• Toasts: 9999