---
title: "overflow:hidden Clips Absolute/Fixed Children Regardless of z-index"
source: daily/2026-05-10.md
updated: 2026-05-10
tags: [css, overflow, z-index, positioning, dropdown]
---

# `overflow: hidden` Clips Absolute/Fixed Children Regardless of z-index

## Rule

`overflow: hidden` on a parent element **clips all descendant content at its boundary** — including absolutely-positioned children — regardless of their `z-index` value.

## Symptom

A dropdown or tooltip is visible in DevTools (correct dimensions, correct position) but **not visible in the viewport**. The element is rendered but clipped by an ancestor's overflow boundary.

Confusion arises because developers reach for `z-index` to fix "element hidden behind something" problems, but overflow clipping is a separate mechanism from stacking order.

## Diagnosis

1. Open DevTools → Elements
2. Inspect the dropdown — it shows correct geometry
3. Walk up the DOM ancestors: find the element with `overflow: hidden` or `overflow-x: hidden`

Common culprits: frosted-glass header containers, card components, scroll areas.

## Fix

**Option A — Remove `overflow-hidden` from the container:**

```html
<!-- Before -->
<div class="glass-header overflow-hidden">
  <nav>...</nav>
  <div class="dropdown absolute top-full left-0 z-50">...</div>  <!-- clipped -->
</div>

<!-- After: overflow-hidden removed -->
<div class="glass-header">
  <nav>...</nav>
  <div class="dropdown absolute top-full left-0 z-50">...</div>  <!-- now visible -->
</div>
```

**Option B — Move the dropdown outside the overflow container:**

```html
<div class="glass-header overflow-hidden">
  <nav>...</nav>
</div>
<!-- Dropdown rendered at a higher DOM level, positioned via JS or portal -->
<div class="dropdown fixed z-50 ...">...</div>
```

## DOM Ordering and z-index

An element **earlier in the DOM** within the same stacking context can render under a later sibling even with higher z-index. When debugging z-index problems:

- Confirm `position` is set (z-index only applies to positioned elements)
- Check for stacking context on ancestors (`transform`, `opacity < 1`, `filter`, `will-change`)

## Common Pattern — Glass Header

Frosted-glass headers use `overflow: hidden` to clip the blur effect to the header box. If the navigation has a dropdown, the dropdown **must** be placed outside the header `<div>`, not inside it.
