Creating two, overlapping divs can be frustrating. Typically, you’ll want to set your bottom layer’s CSS rule to position: relative and the top layer with position: absolute. However, there’s a handy, unexpected tool for creating overlapping HTML elements: CSS Grid.

This isn’t a magical, hidden feature of CSS Grid. In fact, it’s right in MDN’s documentation on CSS Grid: “a grid container’s child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.” This means we can create child elements inside a grid, resulting in overlapping layers. So, how can we do it?

CSS Grid…

Audree Steinberg

Hi, I'm Audree, a full stack engineer —

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store