wiki: auto-compile 2026-05-10 (1 log(s), 235 articles)
This commit is contained in:
parent
f51f01928f
commit
2ab064618c
3 changed files with 61 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 | 28 |
|
||||
| [[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 | 178 |
|
||||
| [[wiki/concepts/_index\|concepts/]] | Atomic knowledge extracted from Claude Code sessions | 179 |
|
||||
| [[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 |
|
||||
|
|
|
|||
53
wiki/concepts/overflow-hidden-clips-positioned-children.md
Normal file
53
wiki/concepts/overflow-hidden-clips-positioned-children.md
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
---
|
||||
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
|
||||
|
|
@ -1,6 +1,13 @@
|
|||
|
||||
# Build Log
|
||||
|
||||
## [2026-05-10T23:59:59+02:00] compile | daily/2026-05-10.md (final — missing file created)
|
||||
- Source: daily/2026-05-10.md
|
||||
- Articles created: [[wiki/concepts/overflow-hidden-clips-positioned-children]]
|
||||
- Articles updated: none
|
||||
- Index updates: none (already indexed at row 213 of concepts/_index)
|
||||
- Note: File was listed in _index.md but missing on disk. Created marquee-buttons-outside-overflow variant of the overflow-hidden clipping rule, with See Also link to overflow-hidden-clips-absolute-children (glass header variant).
|
||||
|
||||
## [2026-05-10T23:59:00+02:00] compile | daily/2026-05-10.md (addendum — Shumiland workflow concepts)
|
||||
- Source: daily/2026-05-10.md
|
||||
- Articles created:
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue