Tailwind Overflow and Layers

Two questions come up in almost every layout. What happens when content is bigger than its box? Which element appears on top when two elements overlap? Overflow classes answer the first question. Z-index classes answer the second.

Understanding Overflow

Overflow describes content that spills out of its container. Imagine pouring a large glass of water into a small cup. The extra water has three options: spill over the edge, get cut off, or stay reachable through a scroll bar. Tailwind gives a class for each option.

Class               Behavior
──────────────────────────────────────────────────
overflow-visible    content spills outside (default)
overflow-hidden     extra content gets clipped
overflow-scroll     scroll bars always visible
overflow-auto       scroll bars appear only when needed
overflow-x-auto     horizontal scrolling only
overflow-y-auto     vertical scrolling only

Clipping Content

The class overflow-hidden cuts off everything outside the box. Developers use it to trim images to rounded corners.

<div class="h-40 w-40 overflow-hidden rounded-full">
  <img src="photo.jpg" class="h-full w-full object-cover" alt="Profile photo">
</div>

 Square photo           After overflow-hidden
┌──────────────┐           ╭──────────╮
│    photo     │    →      │  photo   │
└──────────────┘           ╰──────────╯

Scrolling Inside a Box

Fix the height of a container and add overflow-y-auto. A scroll bar appears when the content grows taller than the box. Chat windows and sidebars use this pattern.

<div class="h-48 overflow-y-auto">
  Long list of messages...
</div>

Wide tables behave well inside a wrapper with overflow-x-auto. The wrapper scrolls sideways on small screens while the page itself stays still.

Trimming Long Text

Three helper classes shorten text that does not fit.

truncate      →  one line, ends with ...
line-clamp-3  →  three lines, ends with ...
text-ellipsis →  adds ... when overflow is hidden

Original:  Learn how to build fast websites with utility classes
truncate:  Learn how to build fast web...

The truncate class combines hidden overflow, an ellipsis, and no wrapping. The line-clamp-3 class works for card descriptions where a few lines look neat.

Understanding Layers With Z-Index

Elements that overlap form a stack, like sheets of paper on a desk. The z-index value decides the order in the stack. A higher number sits closer to the viewer.

Class     Value
────────────────
z-0       0
z-10      10
z-20      20
z-30      30
z-40      40
z-50      50
z-auto    browser decides

The Stack Diagram

Viewer eyes
    ↓
 ┌───────────────┐  z-50  modal window
 │ ┌───────────┐ │  z-40  dropdown menu
 │ │ ┌───────┐ │ │  z-10  sticky header
 │ │ │ page  │ │ │  z-0   normal content
 └─┴─┴───────┴─┴─┘

A Position Is Required

Z-index only works on elements that have a position other than static. Add relative, absolute, fixed, or sticky to the same element. Children of flex and grid containers are an exception and respond to z-index directly.

<header class="sticky top-0 z-10 bg-white">Menu</header>
<div class="fixed inset-0 z-50 bg-black/50">Overlay</div>

Custom Values and Isolation

Arbitrary values such as z-[100] set any number. Keep a short list of agreed values for your team instead, such as 10 for headers and 50 for modals. A shared list prevents number wars where each developer picks a bigger value.

The isolate class creates a fresh stacking context. Elements inside it cannot jump above elements outside it. Use it on a component whose internal z-index values should stay private.

Real Layout Uses

Overflow and layers appear together in everyday interface parts. A card with a rounded image uses overflow-hidden so the picture follows the card corners. A chat panel uses overflow-y-auto so new messages scroll inside a fixed frame. A sticky header uses z-10 so page content slides underneath it. A cookie notice uses fixed and z-50 so it stays above everything else.

Each of these patterns needs only two or three classes. Compare that with writing custom CSS for each one. Utility classes keep the solution visible in the markup, which makes later edits quick.

Overflow on the Page Level

A horizontal scroll bar on the whole page signals a layout bug. One element is wider than the screen. Find the culprit by adding outline to suspect elements. Fix it with a smaller width, a wrapping rule, or overflow-x-auto on that element. Avoid hiding the problem with overflow-x-hidden on the body, because the broken element stays broken.

Troubleshooting Checklist

• Confirm the element has a position class.
• Compare z-index values of siblings, not of distant elements.
• Check parent elements for transforms or opacity, because they start new stacking contexts.
• Inspect the page with browser developer tools to see the real computed values.