CSS Position Property - Beginner level

CSS Position Property

The position property in CSS dictates how an element is positioned on a page and how it interacts with other elements in the layout flow. By default, every HTML element has a position of static. Changing this value unlocks the offset properties: top, bottom, left, right, and z-index.

The 5 Main Position Values

• static (Default): The element stays in the normal document flow. Offset properties (top, bottom, left, right) and z-index have no effect.
• relative: The element is positioned relative to its normal static position. Applying offsets moves it without affecting the surrounding layout—the original space it occupied is preserved.
• absolute: The element is removed completely from the normal document flow. It positions itself relative to its nearest ancestor that has a position other than static (often a parent set to relative).
• fixed: The element is removed from the flow and positioned relative to the browser viewport (screen). It stays in the exact same spot even when the user scrolls.
• sticky: A hybrid of relative and fixed. The element behaves like relative until a specified scroll threshold is reached (e.g., top: 0), at which point it "sticks" in place like a fixed element within its container.