CSS Positioning Properties

By default, all HTML elements have position: static. Static elements follow the normal document flow and ignore top, right, bottom, and left properties.

.element {
    position: static; /* Default */
}

Static positioning is rarely declared explicitly since it is the default. Understanding it provides the foundation for the other position values.

An element with position: relative is positioned relative to its normal position. The element still occupies its original space but can be offset using directional properties.

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

Key behaviors: The offset is calculated from the element's original position. Other elements behave as if the positioned element had not moved.

An element with position: absolute is removed from normal flow and positioned relative to its nearest positioned ancestor. If none exists, it uses the viewport.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 10px;
    right: 10px;
}

Key behaviors: The element is removed from document flow. Other elements ignore its presence. Width collapses to fit content unless set explicitly.

An element with position: fixed is removed from document flow and positioned relative to the viewport. It stays in place during scrolling.

.element {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

See the bottom-right corner of this page for a fixed element. It remains visible as you scroll.

Key behaviors: The element stays in place during scrolling. Common uses include navigation bars and floating buttons. Be mindful of overlap with page content.

An element with position: sticky acts like relative positioning until a scroll threshold is reached, then becomes fixed.

.element {
    position: sticky;
    top: 0;
}

Scroll within the box below to see sticky positioning:

Key behaviors: Requires a threshold value like top: 0. The sticky element is constrained to its parent container.

When positioned elements overlap, z-index controls which appears on top. Higher values appear above lower values.

.element {
    position: absolute;
    z-index: 10;
}