Position

Set the Position, Overflow and z-index of the block.

position

The position property controls how an element is placed in the document. Key values include:

static (default) – Follows normal document flow.
relative – Moves the element relative to its normal position.
absolute – Positions the element relative to its nearest positioned ancestor (or <html> if none).
fixed – Stays in place relative to the viewport, even when scrolling.
sticky – Toggles between relative and fixed based on scroll position.

Warning: Unexpected Overlaps & Layout Issues

Using absolute or fixed positioning removes elements from normal flow, which can cause overlaps, hidden content, or layout breakage. Always check responsiveness and stacking order (z-index) to avoid issues.

Inset – Top, Right, Bottom & Left

The top, right, bottom, and left properties control an element’s position when used with position relative, absolute, fixed, or sticky:

top – Moves the element down from the top.
right – Moves the element left from the right.
bottom – Moves the element up from the bottom.
left – Moves the element right from the left.

These properties adjust placement relative to the nearest positioned ancestor or the viewport (for fixed elements).

Z-index

The z-index property controls the stacking order of elements along the Z-axis (front-to-back).

Elements with a higher z-index value appear in front of those with a lower value.
It only works on elements with position: relative, absolute, fixed, or sticky.
Negative values place elements behind others.

If stacking issues occur, check position and parent elements’ z-index, as nested elements respect their parent’s stacking context.

Overflow X & Overflow Y

The overflow-x and overflow-y properties control how content behaves when it exceeds an element’s width or height.

visible (default) – Content overflows freely.
hidden – Clips overflow without scrollbars.
scroll – Always shows scrollbars, even if not needed.
auto – Adds scrollbars only when necessary.

Use these to prevent layout shifts, control scrolling, or hide unwanted overflow.