---
title: "CSS overflow-hidden Clips Absolutely-Positioned Children"
source: daily/2026-05-10.md
updated: 2026-05-10
tags: [css, overflow, positioning, z-index, layout, marquee]
---

# `overflow: hidden` Clips Absolutely-Positioned Children

## Rule

`overflow: hidden` clips **all descendant content** at the container boundary — including children with `position: absolute`, `position: fixed`, or any `z-index` value. z-index controls stacking order; `overflow` controls clipping. They are orthogonal.

## Practical Consequence

Buttons, dropdowns, or tooltips placed **inside** an `overflow: hidden` container and positioned with `absolute` will be invisible if they extend beyond the container's edges — regardless of how high their `z-index` is.

## Real Case — Marquee Navigation Buttons

A CSS marquee scroll container needed `overflow: hidden` to clip the duplicated track. Navigation buttons were placed inside the same container with `position: absolute; z-index: 10` — they were clipped and invisible.

Fix: move the buttons **outside** the overflow container in the DOM:

```html
<!-- Wrong — buttons inside overflow:hidden -->
<div class="marquee-wrapper overflow-hidden">
  <div class="track">...</div>
  <button class="prev absolute left-0 z-10">‹</button>  <!-- clipped -->
  <button class="next absolute right-0 z-10">›</button>  <!-- clipped -->
</div>

<!-- Correct — buttons outside overflow container -->
<div class="relative">
  <div class="marquee-wrapper overflow-hidden">
    <div class="track">...</div>
  </div>
  <button class="prev absolute left-0 z-10">‹</button>  <!-- visible -->
  <button class="next absolute right-0 z-10">›</button>  <!-- visible -->
</div>
```

## Diagnosis Checklist

When an absolutely-positioned element is invisible or partially clipped:

1. Open DevTools — confirm the element has correct geometry (it's rendered, just clipped)
2. Walk up DOM ancestors — look for `overflow: hidden`, `overflow-x: hidden`, or `overflow-y: hidden`
3. If found: move the element outside that ancestor, or remove `overflow: hidden` from it

## See Also

- [[wiki/concepts/overflow-hidden-clips-absolute-children]] — same rule, glass header context
- [[wiki/concepts/css-animation-js-scroll-conflict]] — why marquee must be pure CSS
