Tailwind Display and Positioning

Display and position classes control how elements appear in the page flow and where they sit relative to other elements. These are foundational layout tools in Tailwind.

Display Classes

The display property determines whether an element takes up a full row, sits inline with other elements, or disappears.

Class            CSS Output
──────────────────────────────────
block            display: block
inline           display: inline
inline-block     display: inline-block
flex             display: flex
inline-flex      display: inline-flex
grid             display: grid
inline-grid      display: inline-grid
hidden           display: none

Block vs Inline — Visual Diagram

BLOCK elements (each takes a full row):
┌─────────────────────────────────────┐
│  <div class="block"> Item 1 </div>  │
└─────────────────────────────────────┘
┌─────────────────────────────────────┐
│  <div class="block"> Item 2 </div>  │
└─────────────────────────────────────┘

INLINE elements (sit side by side):
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Item 1   │ │ Item 2   │ │ Item 3   │
└──────────┘ └──────────┘ └──────────┘

Position Classes

Position classes control how an element is placed on the page relative to its normal flow position or its parent container.

Class       CSS Output           Behavior
────────────────────────────────────────────────────────
static      position: static     Default. Follows normal flow.
relative    position: relative   Stays in flow; offset possible.
absolute    position: absolute   Removed from flow; placed inside parent.
fixed       position: fixed      Stays on screen when user scrolls.
sticky      position: sticky     Scrolls normally, then sticks at threshold.

Offset Classes (top, right, bottom, left)

Use offset classes with relative, absolute, fixed, or sticky to nudge elements from their edges.

top-0      top: 0
top-4      top: 1rem
right-0    right: 0
bottom-0   bottom: 0
left-0     left: 0
inset-0    top/right/bottom/left: 0  (all four at once)

Absolute Positioning Inside a Relative Parent

Diagram:

┌────────────────────────────────────────┐
│  parent (relative)                     │
│                                        │
│                       ┌─────────┐      │
│                       │ badge   │  ← absolute, top-2 right-2
│                       └─────────┘      │
│  Card content here                     │
└────────────────────────────────────────┘

Code:
<div class="relative p-4 border">
  <span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">
    New
  </span>
  <p>Card content here</p>
</div>

Z-Index Classes

When elements overlap, z-index controls which one appears on top. Higher z-index means closer to the viewer.

Class    CSS Output
──────────────────
z-0      z-index: 0
z-10     z-index: 10
z-20     z-index: 20
z-30     z-index: 30
z-40     z-index: 40
z-50     z-index: 50
z-auto   z-index: auto

Overflow Classes

When content is bigger than its container, overflow classes decide what happens.

overflow-hidden   →  Hides any content outside the box
overflow-scroll   →  Always shows scrollbar
overflow-auto     →  Shows scrollbar only when needed
overflow-visible  →  Content spills outside (default)
overflow-x-hidden →  Hides horizontal overflow only
overflow-y-auto   →  Scrolls vertically only when needed

Sticky Header Example

<header class="sticky top-0 z-50 bg-white shadow">
  <nav>My Site Navigation</nav>
</header>

sticky top-0 → header sticks to top of viewport once reached
z-50         → header sits above all other content