🎯 CSS position Property

The position CSS property defines how an element is positioned on a web page.

It works together with top, right, bottom, and left to control element placement.

The position property is essential for creating modern layouts, overlays, sticky headers, and precise element placement.

• Controls exact element placement
• Enables overlays and popups
• Supports sticky navigation bars
• Helps build advanced layouts

The element stays in the normal document flow. Positioning properties do not apply.

div {
    position: static;
}
                

The element is positioned relative to its original position.

div {
    position: relative;
    top: 10px;
    left: 10px;
}
                

The element is removed from normal flow and positioned relative to the nearest positioned parent.

div {
    position: absolute;
    top: 0;
    right: 0;
}
                

The element is fixed to the viewport and does not move when scrolling.

div {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
                

The element behaves like relative until it reaches a scroll position, then it becomes fixed.

div {
    position: sticky;
    top: 0;
}
                

Resets the property to its default value (static).

Inherits the position value from the parent element.

These properties are used to control the exact position of elements that are not in static positioning.

• top → distance from top
• right → distance from right
• bottom → distance from bottom
• left → distance from left