CSS
Create Stacked Overlays and Layered Designs Using CSS Grid
Effectively stack multiple elements on top of each other using CSS Grid's `grid-template-areas` for creating overlays, image captions, or layered UI components.
.stack-container {
display: grid;
/* All children will occupy the same grid area named 'stack' */
grid-template-areas: "stack";
width: 300px;
height: 200px;
margin: 20px auto;
border: 1px solid #ccc;
overflow: hidden; /* Hide anything outside the container */
}
.stack-item {
/* Assign all items to the 'stack' area */
grid-area: stack;
/* Ensure items fill the cell */
width: 100%;
height: 100%;
display: flex; /* For centering content within the stacked item */
justify-content: center;
align-items: center;
}
.background-image {
background-image: url('https://via.placeholder.com/300x200/ADD8E6/000000?text=Background');
background-size: cover;
background-position: center;
z-index: 1; /* Ensure background is beneath overlay */
color: black;
}
.overlay-text {
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-size: 1.5em;
z-index: 2; /* Ensure overlay is on top */
padding: 10px;
text-align: center;
}
How it works: This snippet demonstrates how CSS Grid can be used to easily stack elements on top of each other, creating overlays or layered effects. By defining a single `grid-template-areas: "stack";` on the container and then assigning `grid-area: stack;` to all child elements, every child occupies the exact same grid cell. `z-index` is then used to control the visual stacking order of these overlapping items. This technique simplifies complex layering compared to absolute positioning.