Tried overlapping grid items and got a total mess lol

I threw together a CSS Grid layout with 3 overlapping items for a landing page last Tuesday, thinking I'd get this cool layered effect. Instead, the text turned into a jumbled stack where none of the z-index properties I set worked the way I expected. Turns out I forgot to assign explicit grid-column/row positions to half the items, so the browser just piled them up in the same cell. Has anyone else had grid items go rogue like this when overlapping?

2 comments

2 Comments

morgan_jenkins905d ago

wait the browser just randomly dumps them in the same cell if you don't set positions? that explains why my hero section looked like a chaotic pile of words last week lol

val_taylor5d ago

It's actually weirder than that - the browser treats each element like a stubborn toddler that wants to stand exactly where it pleases until you give it strict instructions. The default position is 'static' which basically means 'good luck figuring out where I'll end up'. Spent a whole afternoon once wondering why my footer kept floating up into my main content area.