Position

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

Position

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.

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.