wiki: auto-compile 2026-05-10 (4 log(s), 249 articles)
This commit is contained in:
Vadym Samoilenko
parent
3ab7b3b443
commit
ff6df437f2
4 changed files with 73 additions and 1 deletions
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
<!-- Articles added automatically by compile.py -->
|
||||
<!-- Format: | [[concepts/slug]] | One-line summary | daily/YYYY-MM-DD.md | date | -->
|
||||
|
|
|
|||
65
wiki/concepts/overflow-hidden-clips-absolute-children.md
Normal file
65
wiki/concepts/overflow-hidden-clips-absolute-children.md
Normal file
|
|
@ -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
|
||||
<!-- 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.
|
||||
|
|
@ -335,3 +335,9 @@
|
|||
- Articles created: [[wiki/concepts/apache-proxypass-include-files-ignored]], [[wiki/concepts/cookie-domain-migration-auth-loop]]
|
||||
- Articles updated: [[wiki/client-knowledge/ford]] (service path, GPAS naming, SSH alias), [[wiki/architecture/cloud-run-jobs-celery]] (USE_CELERY_FALLBACK, optical-dev override), [[wiki/architecture/optical-dev-server-deploy]] (ProxyPass include limitation)
|
||||
- Index updates: [[wiki/concepts/_index]] (73→75); [[wiki/_master-index]] (concepts 73→75)
|
||||
|
||||
## [2026-05-10T21:00:00+03:00] compile | 2026-05-10.md
|
||||
- Source: daily/2026-05-10.md
|
||||
- Sessions: kvytky/shumiland Next.js+Payload CMS, banner-tool
|
||||
- Articles created: [[wiki/concepts/payload-cms-root-layout-requirement]], [[wiki/concepts/payload-cms-node26-esm-workaround]], [[wiki/concepts/overflow-hidden-clips-absolute-children]], [[wiki/concepts/pydantic-exclude-none-null-clearing-conflict]], [[wiki/concepts/css-marquee-animation-gpu-pattern]], [[wiki/concepts/css-animation-js-scroll-conflict]], [[wiki/concepts/nextjs16-lint-command-removed]], [[wiki/concepts/figma-mcp-oauth-reconnect-restart]], [[wiki/concepts/react-state-playwright-css-hover]]
|
||||
- Index updates: [[wiki/concepts/_index]] (187→196); [[wiki/_master-index]] (concepts 187→196)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue