Tailwind CSS Tutorial · Layout · Lesson 10 of 27
Display and Position
Showing and hiding elements, block and inline, relative and absolute positioning, sticky headers and z-index.
Display
block, inline-block, inline, flex, inline-flex, grid, hidden (display: none), contents.
Position
| Class | Use it for |
|---|---|
relative |
a reference point for absolutely positioned children |
absolute + top-0 right-0 |
badges, overlays, icons placed inside a parent |
fixed |
elements that stay on screen (chat buttons, toasts) |
sticky top-0 |
headers that stick while scrolling |
inset-0 |
stretch to all four edges |
z-10, z-50 |
stacking order |
<div class="flex gap-8 p-8">
<div class="relative">
<div class="grid size-14 place-items-center rounded-xl bg-gray-100 text-2xl">M</div>
<span class="absolute -top-2 -right-2 grid size-6 place-items-center rounded-full bg-rose-500 text-xs font-bold text-white ring-2 ring-white">3</span>
</div>
<div class="relative h-28 w-48 overflow-hidden rounded-xl bg-linear-to-br from-indigo-500 to-sky-400">
<div class="absolute inset-0 grid place-items-center bg-black/30 font-semibold text-white">Overlay with inset-0</div>
</div>
</div>
<div class="h-56 overflow-y-auto rounded-lg border">
<header class="sticky top-0 z-10 border-b bg-white/90 p-3 font-semibold backdrop-blur">Sticky header (scroll the box)</header>
<div class="space-y-2 p-3">
<p class="rounded bg-gray-100 p-3">Row 1</p><p class="rounded bg-gray-100 p-3">Row 2</p><p class="rounded bg-gray-100 p-3">Row 3</p>
<p class="rounded bg-gray-100 p-3">Row 4</p><p class="rounded bg-gray-100 p-3">Row 5</p><p class="rounded bg-gray-100 p-3">Row 6</p>
</div>
</div>
Test yourself
To place a badge in the corner of a card, the card needs which class?
relativeabsolutefixedstatic
Show answer
Answer: relative
Absolute children are positioned relative to the nearest positioned ancestor.