CSS Position

The CSS position property controls how an element is placed in the page layout. By default, elements follow the normal document flow — they appear one after another from top to bottom. The position property allows elements to be moved, stacked, fixed to the screen, or positioned relative to other elements, breaking out of normal flow when needed.

When an element is positioned (using any value other than static), the offset properties top, right, bottom, and left can be used to move it from its reference point.

Position Values

Value	Description
`static`	Default. Normal document flow. Offset properties have no effect.
`relative`	Positioned relative to its own normal position. Space in layout is preserved.
`absolute`	Positioned relative to the nearest positioned ancestor. Removed from flow.
`fixed`	Positioned relative to the browser viewport. Stays in place while scrolling.
`sticky`	Switches between relative and fixed based on scroll position.

1. position: static

This is the default value for all elements. They appear in normal document order. The top, left, right, and bottom properties have no effect.

div {
    position: static;  /* Default — no special positioning */
}

2. position: relative

The element is moved from where it would normally appear, but the original space it occupied remains in the layout (unlike absolute positioning).

.box {
    position: relative;
    top: 20px;    /* Move 20px down from its normal position */
    left: 30px;   /* Move 30px right from its normal position */
    background-color: lightblue;
    padding: 10px;
}

Relative positioning is also used to establish a reference point for absolutely positioned child elements.

3. position: absolute

The element is removed from normal document flow and positioned relative to its nearest ancestor that has a position other than static. If no such ancestor exists, it is positioned relative to the <html> element (the page itself).

.parent {
    position: relative;   /* This becomes the reference container */
    width: 300px;
    height: 200px;
    background-color: #f0f0f0;
}

.child {
    position: absolute;
    top: 10px;    /* 10px from the top of .parent */
    right: 10px;  /* 10px from the right edge of .parent */
    background-color: #e74c3c;
    color: white;
    padding: 5px 10px;
}

This pattern is commonly used for badges, tooltips, close buttons, and overlay labels placed on top of another element.

4. position: fixed

The element is positioned relative to the browser viewport and stays in place even when the user scrolls the page. It is commonly used for sticky navigation bars, floating action buttons, and cookie notices.

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    color: white;
    padding: 15px 20px;
    z-index: 1000;  /* Ensures it stays on top of other content */
}

Because a fixed element no longer occupies space in the flow, adding padding-top to the content below it prevents content from being hidden behind it.

5. position: sticky

A sticky element behaves like relative until the user scrolls to a defined threshold — at that point it "sticks" and behaves like fixed until its parent element scrolls out of view.

thead tr th {
    position: sticky;
    top: 0;  /* Sticks to the top of the scroll container */
    background-color: #2c3e50;
    color: white;
}

Sticky positioning is very useful for table headers that stay visible as users scroll through large data tables, or section headings that stick as users scroll through long content.

The z-index Property

When elements overlap (using positioning), z-index determines which element appears on top. An element with a higher z-index appears in front of one with a lower value. The z-index only works on positioned elements (not static).

.tooltip {
    position: absolute;
    z-index: 100;     /* Appears above normal content */
}

.overlay {
    position: fixed;
    z-index: 9999;    /* Appears above everything else */
}

Complete Positioning Example — Badge on Card

.card {
    position: relative;
    width: 250px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: white;
}

.badge {
    position: absolute;
    top: -10px;        /* Slightly above the card's top edge */
    right: -10px;      /* Slightly right of the card's right edge */
    background-color: #e74c3c;
    color: white;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: bold;
}

Summary

static is the default — no special positioning. relative shifts an element from its normal position while preserving its space. absolute removes it from flow and positions it relative to the nearest positioned ancestor. fixed locks an element to the viewport, ignoring scrolling. sticky is a scroll-aware hybrid of relative and fixed. The z-index property controls stacking order when elements overlap.

Previous lessons

Back to courses

Next lessons