Fixing your layout headaches
summary
Covers two concrete fixes: make a wrapper and give it position: relative so an absolutely positioned child centers with top:50% left:50% transform:translate(-50%,-50%) and stays inside that containing block; beware that a fixed element becomes anchored to the viewport unless a transformed ancestor exists, so move the fixed element out of any element with a transform to restore expected behavior; remember z-index is scoped by the stacking context — remove or move elements (or create a new stacking context around main) to keep overlays above or below other sections.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 0:37CSS for JavaScript
- 1:47Layout modes
- 2:10Position
- 2:26Position Relative
- 4:17Position Fixed
- 5:52Containing Block
- 6:43Absolute Block
- 10:22Stacking context
- 10:59Stacking context headaches
- 13:03Stacking context example
