Positioning in CSS

** What is CSS position property?**

The CSS position property controls how an element is placed in a document, determining whether it follows the normal document flow or is positioned at a specific location using coordinates. It accepts five keyword values that define the element's relationship to its containing block, siblings, and the viewport.

** Key Position Values**

static: The default value. Elements follow the normal document flow, and top, right, bottom, left, and z-index properties have no effect.

relative: The element remains in the normal flow, but can be offset relative to its original position using top, right, bottom, or left. The space originally occupied by the element is preserved.

absolute: The element is removed from the normal flow, meaning it does not take up space in the layout. The elements align in respect with the body of the web page (entire screen)

fixed: Like absolute, the element is removed from the normal flow. It remains in the same place even when the page is scrolled, making it ideal for sticky headers or footers.

sticky: A hybrid of relative and fixed. The element behaves like a relatively positioned element until it crosses a specified scroll place (defined by top, bottom, etc.), at which point it behaves like a fixed element, sticking to that position within its container.

Z-index

The z-index CSS property specifies the stack order of positioned elements, determining which element appears in front or behind others along the third dimension (z-axis). Elements with a higher z-index value are closer to the viewer, covering elements with lower values.

This property only works on elements with a position value other than static (i.e., absolute, relative, fixed, or sticky) and on flex or grid items.

Key characteristics include:

Default Behavior: If no z-index is set, elements stack in source order (later HTML elements appear on top).

Stacking Contexts: z-index values are only compared within the same stacking context; nested contexts create local stacking rules.

Values: Accepts integers (positive, negative, or zero) and the keyword auto.

Common Usage: Used for modals, dropdowns, tooltips, and overlapping layouts where visual hierarchy is critical.