When I searched for ways to overlay content I usually come across the absolute position method, which by the looks of it has been around for a while. And then I learned about CSS Grid and how we can put multiple elements in the same grid area—and they will just lay on top of each other!
CSS Grid overlaying content
This method requires some knowledge of how CSS Grid works and the CSS Grid course by Wes Bos is a great place to start. Wes briefly discusses this method in one of his course videos.
With CSS Grid you can place one or more elements in the same grid area. Elements set to the same grid area will just overlay on top of each other. The following is a step-by-step on how to set this up
-
Add your html elements. Create a container, this will be your 'grid container', and in it add the content element and the overlay element. In this example the container aptly has the class
grid-container
and we will have the overlay element with classitem-grid-overlay
and a content element with classitem-grid-content
. I've put a placeholder image in the content element
<div class="grid-container"> <div class="item item-grid-content"> <img src="https://via.placeholder.com/250?text=Image"> </div> <div class="item item-grid-overlay">❤️</div> </div>
-
Make the
grid-container
a 'grid container' by giving it the propertydisplay: grid
. Doing this will automatically make the child elements 'grid items'. This means you do not have to do anything toitem-grid-content
anditem-grid-overlay
to make them 'grid items'.
.grid-container { display: grid; }
-
Define a 'grid area' in the grid-container using
grid-template-areas
. In this example, I create just one grid area calledoverlaydemo
, but thegrid-template-areas
property enables you to define as many areas as you want. See the documentation for grid-template-areas on MDN web docs
.grid-container { width: 250px; display: grid; grid-template-areas: "overlaydemo"; /* create one grid area called overlaydemo */ /* you can give your area a different name */ }
-
Place both of the content and overlay elements in the 'grid area' you defined by setting the grid-area property for each of
item-grid-content
anditem-grid-overlay
togrid-area: overlaydemo
. Use the same name you defined in.grid-container
, but without the quotes. Sinceitem-grid-overlay
is afteritem-grid-content
in the HTML it will be on top by default
.item-grid-content { grid-area: overlaydemo; /* use the same name you defined in the .grid-container */ /* notice that we don't use quotes */ } .item-grid-overlay { grid-area: overlaydemo; /* place the overlay element in the same grid area as the content element */ }
That's it! For a bare bones basic implementation that's all you need
Example
Top comments (0)