Why Is My Dropdown Getting Cut Off?

by

Dropdown Fix

Why is my dropdown getting cut off even with a huge z-index?

Why is my dropdown getting cut off? In many real layouts, the dropdown is not failing because its z-index is too small. The real problem is usually overflow: hidden, overflow: auto, a broken positioning setup, or a stacking context that traps the menu inside the wrong layer.

Browse CSS Fixes See the Difference
  • Classic UI bug
  • Often blamed on z-index
  • Usually a clipping issue

What the bug looks like

The menu opens but gets cut off by the parent, disappears behind the next section, or looks half visible and unusable.

Why it happens

Dropdowns need both visual space and correct layering. If the parent clips overflow or traps the menu in the wrong context, the dropdown cannot escape cleanly.

What usually fixes it

Check parent overflow first, then verify positioning and stacking context before touching z-index again.

Common broken version

Clipped dropdown 
.menu-wrap {
  position: relative;
  overflow: hidden;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
}

Why this fails

The dropdown menu has a high z-index, but the parent still clips it. This is the mistake that confuses a huge number of developers: z-index cannot defeat physical clipping from overflow: hidden.

Simple rule: if the parent is cutting the child, a bigger z-index usually changes nothing.

Recommended positioning pattern

Correct structure

In many navigation and action menus, the safest baseline is a relatively positioned parent and an absolutely positioned dropdown menu. 

.nav-item {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  z-index: 100;
}

The invisible villain: overflow clipping

One of the most common answers to “why is my dropdown getting cut off?” is simply that the menu is inside a wrapper designed to clip content.

This happens in cards, panels, tables, responsive wrappers, sliders, carousels, and custom UI containers. The dropdown may be perfectly positioned, but the parent refuses to let it visually escape.

Possible fix

Let the menu escape 
.menu-wrap {
  position: relative;
  overflow: visible;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
}

A high z-index does not beat clipping

If a parent cuts visual overflow, the child cannot simply “win” by using a bigger number.

Layering and clipping are not the same bug

A dropdown hidden behind another section is a layering problem. A dropdown physically cut off by its own parent is a clipping problem.

Fix the right problem first

If you solve clipping first, many “z-index not working” bugs suddenly stop being mysterious.

Stacking context trap

Not just a z-index issue 
.section {
  position: relative;
  transform: translateZ(0);
}

.dropdown-menu {
  position: absolute;
  z-index: 9999;
}

Why z-index still seems broken

A parent with transform, opacity, filter, or similar properties can create a new stacking context. That means the dropdown is no longer competing globally. It is trapped inside the parent’s layer system.

This is why a menu can still sit behind the next section even with a giant z-index value.

Fast practical rule

If your dropdown is getting cut off, inspect the parent for overflow: hidden before touching z-index again. That one check solves a huge percentage of real dropdown bugs.

Why this happens so often in sliders, tables, and carousels

Sliders and carousels often use clipped wrappers on purpose. Responsive tables and scroll containers also hide overflow to control layout. That makes dropdown menus inside those components unusually likely to get cut off.

In those cases, the menu may need to live outside the clipped wrapper or be rendered in a higher layer container.

Classic slider problem

Wrapper clips the menu 
.slider-track {
  overflow: hidden;
}

.slide-menu {
  position: absolute;
  top: 100%;
  left: 0;
}

Advanced escape pattern

Move the menu higher 
.dropdown-layer {
  position: relative;
  z-index: 200;
}

/* render the menu in a higher layer container
   instead of leaving it inside a clipped card */

When the best fix is structural

Sometimes the dropdown does not belong inside the clipped component at all. If the parent must keep overflow: hidden for layout reasons, the cleaner solution may be to move the menu higher in the DOM or render it into a dedicated layer container.

In framework-based apps, this is often done with a portal. In simpler layouts, it may mean restructuring the markup.

Debug checklist

  • Inspect the parent chain for overflow: hidden, overflow: auto, or clipped wrappers.
  • Confirm the trigger wrapper is positioned with position: relative.
  • Confirm the dropdown itself is positioned intentionally, usually with position: absolute.
  • Look for parents using transform, opacity, filter, or other stacking-context properties.
  • Check whether the dropdown is inside a slider, carousel, table wrapper, or card component that must clip overflow.
  • Temporarily switch suspected parents to overflow: visible while debugging.
  • Only adjust z-index after you understand whether the bug is clipping or layering.
Best first move Inspect the closest parent and see whether it is clipping overflow before increasing z-index.
Most common false fix Jumping from z-index: 10 to z-index: 9999 while the parent is still cutting the menu off.
Most overlooked cause The dropdown is inside a slider, carousel, or table wrapper that was never designed to let children escape visually.
Better mindset Dropdown bugs are often structural. Fixing the wrong layer or the wrong parent wastes time fast.

Final takeaway

Why is my dropdown getting cut off? In most cases, the browser is not ignoring your z-index. The real issue is usually that the menu is being clipped by a parent, trapped inside the wrong stacking context, or positioned inside a structure that was never meant to let it escape.

Fix overflow first, verify positioning second, and only then adjust layering. Once you separate clipping from z-index problems, dropdown bugs become much easier to solve and much less frustrating.

Want more fixes like this?

Browse more CSS and layout debugging guides or jump to the full FrontFixer library.

Browse CSS Fixes All Fixes

Leave a Comment