diff --git a/wiki/_master-index.md b/wiki/_master-index.md index c924781..460d0e5 100644 --- a/wiki/_master-index.md +++ b/wiki/_master-index.md @@ -23,7 +23,7 @@ This 3-hop pattern works for hundreds of articles without vector search. | [[wiki/tech-patterns/_index\|tech-patterns/]] | Recurring tech stacks: FastAPI, React/Vite, Next.js, Azure AD, AI, Box, One2Edit, Redis/Celery, cost-tracker, OMG API | 29 | | [[wiki/architecture/_index\|architecture/]] | Cross-cutting architectural patterns: Docker Compose, multi-agent AI, GCP timeout, RAG, hotfolder, optical-dev deploy, cost-tracker, new-project checklist, troubleshooting playbooks, ADR log, Cloud Run Jobs | 11 | | [[wiki/client-knowledge/_index\|client-knowledge/]] | Per-client notes for Ford, H&M, L'Oréal, Barclays, Ferrero, 3M, BAIC | 7 | -| [[wiki/concepts/_index\|concepts/]] | Atomic knowledge extracted from Claude Code sessions | 191 | +| [[wiki/concepts/_index\|concepts/]] | Atomic knowledge extracted from Claude Code sessions | 192 | | [[wiki/connections/_index\|connections/]] | Cross-cutting insights linking 2+ concepts: FastAPI+Azure AD+Docker trinity, AI→cost-tracker, Apache+Vite basePath, GCP→REST polling, Box+hotfolder, Docker DNS+AdGuard, Celery prefork×faster_whisper memory stacking | 10 | | [[wiki/qa/_index\|qa/]] | Filed answers to queries (saved with `--file-back`) | 0 | | [[wiki/homelab/_index\|homelab/]] | Self-hosted infra: Proxmox install, IOMMU/PCI passthrough, hypervisor setup, budget builds, HP Elitedesk G3, Homarr API + Apps + Boards + Certificates + Integrations + Settings + Tasks + AdGuard + Clock + Docker Stats + Docker Integration + Download Client + Firewall + Proxmox Integration + Radarr + Readarr + Sonarr + Bookmarks + Calendar + Icons + App Widget + Weather + GitHub + Nextcloud + qBittorrent + RSS Feed + Speedtest Tracker + System Health Monitoring + System Resources + Services Map + Media Stack | 43 | diff --git a/wiki/concepts/_index.md b/wiki/concepts/_index.md index 1534299..bc8c8db 100644 --- a/wiki/concepts/_index.md +++ b/wiki/concepts/_index.md @@ -212,5 +212,6 @@ | [[wiki/concepts/nextjs16-lint-command-removed\|Next.js 16 — next lint Command Removed]] | `next lint` is removed in Next.js 16. Running it produces: | daily/2026-05-10.md | 2026-05-10 | | [[wiki/concepts/overflow-hidden-clips-positioned-children\|CSS overflow-hidden Clips Absolutely-Positioned Children]] | `overflow: hidden` clips all descendants including absolute/fixed children regardless of z-index — move interactive elements outside the container | daily/2026-05-10.md | 2026-05-10 | | [[wiki/concepts/react-state-playwright-css-hover\|React useState Dropdown — CSS group-hover vs useState for Playwright]] | Playwright `hover()` on a trigger element does not reliably open a React dropdown that uses `useStat | daily/2026-05-10.md | 2026-05-10 | +| [[wiki/concepts/overflow-hidden-clips-absolute-children\|overflow:hidden Clips Absolute/Fixed Children Regardless of z-index]] | `overflow: hidden` on a parent element **clips all descendant content at its boundary** — including | daily/2026-05-10.md | 2026-05-10 | diff --git a/wiki/concepts/overflow-hidden-clips-absolute-children.md b/wiki/concepts/overflow-hidden-clips-absolute-children.md new file mode 100644 index 0000000..4ddab2a --- /dev/null +++ b/wiki/concepts/overflow-hidden-clips-absolute-children.md @@ -0,0 +1,65 @@ +--- +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 + +