Display & Position

Simple utilities for controlling element display modes and positioning schemes. These are foundational classes that work with other utilities like flexbox and grid.

Display

Control how elements generate boxes in the document flow:

.block - Block-level element (full width, new line)

.inline - Inline element (flows with text)

.inline-block - Inline element that accepts width/height

.flex - Flexbox container (see Flexbox section)

.inline-flex - Inline flexbox container

.grid - Grid container (see Grid section)

.inline-grid - Inline grid container

.hidden - Remove element from layout (display: none)

The .flex and .grid classes are covered in detail in their respective sections. These classes only set the display mode; combine them with flex or grid utilities for layout control.

Position

Control how elements are positioned in the document:

.static - Default flow positioning (not positioned)

.relative - Positioned relative to normal position

.absolute - Positioned relative to nearest positioned ancestor

.fixed - Positioned relative to viewport

.sticky - Toggles between relative and fixed based on scroll

Position utilities set the positioning scheme but don't include offset values (top, right, bottom, left). Use inline styles or custom CSS for precise positioning coordinates.