Overlapping HTML Elements Using CSS Grid

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 has a property called grid-area. The grid-area property allows us to place an item at a specific location inside a grid. We can also give names to different grid areas and create grid templates, but I won’t cover that in this article. The grid-area property is really syntactic sugar for grid-row-start, grid-column-start, grid-row-end, and grid-column-end. For now, all you need to know is that a grid-area: 1 / 1 places an item at the first row and first column inside a grid.

Let’s walk through an example I used in making my portfolio website. I wanted to display text that slides in from the left and right sides of the screen. Beneath the text, I wanted to create a background split vertically in two halves. The left half would be colored yellow, and the right half would be colored cream.

I created my split background by creating two divs with widths of 50% inside a larger div.

<div className="bottom-layer">
  <div className="div left"></div>
  <div className="div right"></div>
</div>

Here’s the styling for the background:

.div {
  display: flex;
  background-color: #fad02c;
  width: 50%;
  height: 100vh;
  margin: 0;
  padding: 0;
}
.left {
  background-color: #fad02c;
}
.right {
  background-color: #f8efe4;
}

Next, it was time to create my text. I added the text “hello.” to display in the center of the screen. Since I wanted the word “hello” and the period to slide in from opposite sides of the screen, I separated them into two divs.

<div className="top-layer">
  <div className="text">
    <div className="slideFromLeft"> <h1>hello</h1> </div>
    <h1 className="period slideFromRight"> . </h1>
  </div>
</div>

I wanted the text to appear in the center of the screen. You can see the styling below:

.top-layer {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  font-family: "Didact Gothic", "Helvetica", sans-serif;
  font-size: 9vw;
  letter-spacing: 3px;
}
.period {
  color: #90adc6;
}

After styling, this is what the text should look like.

The main text is the word “hello” in the center of the screen with a colorful accent period.

However, if you’ve been following along, you’ll probably see something like this in your browser.

The screen’s background is split into a yellow half and a cream, but you can’t see the text.

It’s time to make the text and background overlap! The key is to take our background layer and our text layer and place both divs inside a wrapper div. The wrapper div will become our grid.

<div className="wrapper">
  <div className="bottom-layer">
    <div className="div left"></div>
    <div className="div right"></div>
  </div>
  <div className="top-layer">
    <div className="text">
      <div className="slideFromLeft"> <h1>hello</h1> </div>
      <h1 className="period slideFromRight">.</h1>
    </div>
  </div>
</div>

We can then set the locations of our bottom and top layers by setting their grid areas. We want them both to be in the first row and first column of our grid. This will create a nice overlap with the text overlaying the background. However, for this to work, the top layer must be below the bottom layer in the html structure. You can see in the code above that our className="top-layer" div appears under the className="bottom-layer" div.

Here’s the CSS for our grid:

.wrapper {
  display: grid;
}

.bottom-layer, .top-layer {
  grid-area: 1 / 1;
}

Finally, we’re good to go! We can now see our text overlapping the background in the browser.

The text layer is clearly on top of the background layer.

You can check out the code in action here. Make sure you refresh to see the animation!

Here’s the code. It’s a React component because React is the best

Thanks for reading about one of my favorite styling tricks. Do you like to use CSS Grid or positioning for overlapping elements? Let me know in the comments!

Resources:

How to overlay one div over another div

CSS Grid Layout