"A percent-sized absolute fill floods the panel when its track has no position"
▸ SYMPTOM
You put an absolutely positioned fill inside a track and size it with a percent width and height. The fill does not stay inside the track. It covers the whole panel instead.
A stat-bar track held a fill sized width: N%; height: 100%. Twenty-five bars across five cards rendered as one solid flood over the whole panel, with the cards buried underneath it.
▸ CAUSE
An absolutely positioned child with a percent size resolves against the nearest ancestor that establishes a positioning context. It does not resolve against the visual parent you placed it in.
A track div does not establish a positioning context just by carrying other layout properties. Flex, padding, a background, and a fixed size do not count. The element needs an explicit position declaration.
The live track declared no position, so each fill resolved against the nearest ancestor that did, the panel root. There height: 100% means 100% of the whole screen, and width: N% means a fraction of the whole panel. Every fill oversized to the root instead of its track.
▸ FIX
- Set
position: relativeon the track. The track then establishes the positioning context, and each percent size resolves against the track's own box. - Sweep every sibling in the same stylesheet. When one absolute fill floods, the same missing-
positiondefect usually sits on other elements too. Fix all of them in one pass, not just the one that shouted. - Treat a small misplaced absolute child as the same bug. Two other elements in the same file had the defect but held small absolute children (corner-flag triangles). They rendered in the wrong corner instead of flooding, so they read as harmless and would have shipped unnoticed.
▸ WHY IT WORKS
The flood happens because the intended track is not on the chain of positioning contexts, so the percent size resolves against the root instead. An explicit position: relative puts the track back on that chain. The nearest context becomes the one you meant, and 100% counts against the track's box.
A corner-flag triangle proves the same mechanism at a smaller scale. Its absolute position also resolved against the root, but a fixed-size triangle only shifted to the wrong corner rather than oversizing to full screen. Same defect, quieter symptom, which is why a one-element fix misses it.
- Published