Layout

Control component positioning, stacking, visibility, overflow, and isolation

Layout controls how a component participates in the page layout. Use them to change positioning, offsets, stacking order, visibility, overflow, and stacking-context isolation.

Position

Position defaults to None.

Option	Behaviour
None	Adds no positioning rule.
Static	Keeps the component in normal document flow and ignores offsets.
Relative	Keeps its original space while allowing offsets and positioned descendants.
Absolute	Removes it from normal flow and positions it against the nearest positioned ancestor.
Fixed	Removes it from normal flow and positions it against the viewport.
Sticky	Behaves normally until it reaches an offset, then remains pinned within its scrolling ancestor.

See Tailwind CSS Position for the equivalent CSS behaviour.

Sticky positioning needs at least one non-Auto offset, usually Top. It can also be prevented by an ancestor’s overflow or insufficient scrollable height.

Z-Index

Z-Index controls stacking order and is not responsive.

• None — Adds no z-index value. This is the default.
• Auto — Lets the browser determine the stack order.
• Custom — Reveals a number field, which defaults to 0 and accepts positive or negative values.

See Tailwind CSS Z-Index for the equivalent CSS behaviour.

Top, Right, Bottom, and Left

Type defaults to None.

• None — Adds no offsets.
• Uniform — Reveals one Inset value for all four sides. It defaults to 0.
• Individual — Reveals separate Top, Right, Bottom, and Left values. Each defaults to 0.

Offsets support responsive Theme Spacing or custom CSS values. They affect Relative, Absolute, Fixed, and Sticky positioning; Static ignores them.

See Tailwind CSS Top, Right, Bottom, and Left.

Display

Hidden is off by default. Enable it at a breakpoint to remove the component from the rendered layout at that breakpoint and above until another responsive override changes it.

Visibility defaults to Auto.

• Auto — Adds no visibility rule.
• Visible — Shows the component.
• Invisible — Hides the component while preserving its layout space.

See Tailwind CSS Visibility.

Hidden and Invisible are different: Hidden removes the component from layout; Invisible leaves an empty space where it would have appeared.

Overflow

Overflow defaults to None.

• None — Adds no overflow rule.
• Visible — Allows content to extend beyond the component.
• Hidden — Clips overflowing content without scrollbars.
• Scroll — Always provides scrolling for overflowing content.
• Auto — Adds scrollbars only when content overflows.

See Tailwind CSS Overflow.

Isolation

Isolation defaults to None.

• None — Adds no isolation rule.
• Isolate — Creates a new stacking context so child z-index values remain within the component.
• Auto — Lets the browser decide whether a stacking context is needed.

See Tailwind CSS Isolation.

Flex and Grid Items

Some components also provide Flexbox and Grid item controls. These settings apply only when the component is inside the matching parent:

• Grid Item controls column, row, span, and placement.
• Flex Item controls order, growth, shrink, basis, and self-alignment.

Use the parent Flex or Grid controls for the overall layout, then use item controls only for exceptions.

Layout UI in Elements

The appearance may have changed since this screenshot, but the underlying controls remain the same.