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?