Overlapping Header with CSS Grid

Overlapping Headers Without the Magic Numbers

Snook tackles a familiar layout problem: an oversized header at the top with content pulled up into its space. The classic approach has always relied on negative margins.

“Historically, I’ve done this with negative margins. The header has a height that adds a bunch of padding to the bottom and then the body gets a margin-top: -50px or whatever the design calls for.”

When the margin and padding values match, this works, but it still forces numbers to stay in sync across separate elements — not quite magic numbers, but far from elegant.

His alternative is building the layout with CSS grid instead, a much more robust solution.

Coincidentally, Chen Hui Jing’s “The one in black and orange” post showed the same pattern.

That overlap inspired a video walkthrough of the technique as well.