Overflow and Z-Index

Master content overflow control and element layering to create polished, professional layouts.

When building websites, content doesn't always fit perfectly inside its container. Images might be too large, text might overflow, or elements might stack in the wrong order. CSS gives you two powerful tools to handle these situations: the overflow property controls what happens when content exceeds its container, and the z-index property controls which elements appear on top of others. Think of overflow like a picture frame — you can choose to hide parts of the photo that don't fit, add scrollbars to see the whole image, or let it spill outside the frame. The z-index works like layers in a photo editor, where you decide which layer appears in front of others.

Understanding Overflow

The overflow property determines what happens when an element's content is too big to fit inside its defined dimensions. By default, content simply flows outside its container, which can break your layout. The WanderLust team discovered this when their destination descriptions were spilling out of their card containers.

selector

{

overflow

value

; }

Element to control

Property name

How to handle overflow

Overflow Values

The overflow property accepts several values, each handling content overflow differently. Here's how each value affects a destination card that's too small for its content:

/* WanderLust destination card with overflow control */
.destination-card {
  width: 200px;
  height: 100px;
  border: 2px solid #0ea5e9;
  padding: 15px;
  overflow: visible; /* Default - content flows outside */
}

What just happened?

The text flows outside the card boundaries because overflow: visible is the default behavior. The container size stays fixed, but content extends beyond it. Try this: change the text content to see how it affects the overflow.

Now compare this with overflow: hidden, which clips any content that doesn't fit:

/* Hide overflowing content completely */
.destination-card {
  width: 200px;
  height: 100px;
  border: 2px solid #0ea5e9;
  padding: 15px;
  overflow: hidden; /* Clip content that doesn't fit */
}

Adding Scrollbars with Overflow

The most user-friendly solution is often overflow: scroll or overflow: auto. These values add scrollbars when content exceeds the container size, allowing users to see all the content without breaking your layout.

/* Add scrollbars for overflowing content */
.destination-description {
  width: 300px;
  height: 150px;
  border: 2px solid #0ea5e9;
  padding: 15px;
  overflow: auto; /* Scrollbars appear when needed */
  background: #f8fafc;
}

What just happened?

The overflow: auto property added a vertical scrollbar because the content exceeded the container height. Users can now scroll to read all content while the card maintains its fixed dimensions. Try this: resize your browser to see how scrollbars adapt.

Controlling Individual Axes

You can control horizontal and vertical overflow independently using overflow-x and overflow-y. This is particularly useful when you want different behaviors for each direction.

/* Different overflow behavior for each axis */
.travel-gallery {
  width: 400px;
  height: 200px;
  border: 2px solid #f97316;
  padding: 10px;
  overflow-x: auto;   /* Horizontal scrolling */
  overflow-y: hidden; /* Vertical clipping */
  white-space: nowrap; /* Prevent wrapping */
}

Understanding Z-Index

The z-index property controls the stacking order of positioned elements — those with position: relative, absolute, fixed, or sticky. Think of it like layers in a stack of papers: higher z-index values appear on top of lower ones.

Important Note

Z-index only works on positioned elements. If an element has position: static (the default), z-index has no effect. You must set position to relative, absolute, fixed, or sticky first.

Here's how the WanderLust team used z-index to layer a booking form over a background image:

/* Layered booking interface */
.hero-background {
  position: relative;
  width: 100%;
  height: 300px;
  background: linear-gradient(45deg, #0ea5e9, #f97316);
  z-index: 1; /* Bottom layer */
}

.booking-form {
  position: absolute;
  top: 50px;
  right: 30px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  z-index: 10; /* Top layer */
}

What just happened?

The booking form appears on top of the gradient background because it has a higher z-index value (10 vs 1). The position: absolute allows the form to float above other content while z-index controls the stacking order. Try this: change the z-index values to see the layering effect.

Stacking Context

Elements with the same z-index value stack according to their order in the HTML — later elements appear on top. Negative z-index values place elements behind their parent, while positive values place them in front.

/* Creating layered destination cards */
.card {
  position: relative;
  width: 200px;
  height: 120px;
  padding: 15px;
  margin: 10px;
  border-radius: 8px;
}

.card-background { z-index: -1; } /* Behind parent */
.card-content { z-index: 0; }     /* Normal layer */
.card-overlay { z-index: 5; }     /* Above content */

Practical Applications

Combining overflow and z-index creates powerful layout solutions. Here's how the WanderLust team built a modal dialog that appears over page content with a scrollable interior:

/* Modal overlay with controlled scrolling */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.8);
  z-index: 1000; /* Above all page content */
}

.modal-content {
  position: relative;
  width: 400px;
  max-height: 500px;
  margin: 50px auto;
  background: white;
  border-radius: 12px;
  overflow-y: auto; /* Scrollable content */
  z-index: 1001; /* Above overlay */
}

What just happened?

The modal uses position: fixed with high z-index values to appear above all page content. The dark overlay (z-index: 1000) covers the entire screen while the modal content (z-index: 1001) appears on top. The overflow-y: auto adds scrolling when content exceeds the maximum height. Try this: add more content to see the scrolling effect.

Pro Tip: Use z-index values in increments of 10 or 100 (like 10, 20, 30) instead of 1, 2, 3. This makes it easier to insert new layers later without reorganizing all your z-index values.

Quiz

Up Next: Flexbox Basics

Master the flexible box layout model to create responsive, aligned layouts with minimal code and maximum control.

← Previous Course Index Next →