CSS
Overlay Elements or Stack Layers with CSS Grid
Achieve precise element overlaying or layer stacking using CSS Grid by assigning multiple items to the same grid cell, ideal for image captions or complex UI components.
.overlay-container {
display: grid;
/* Define a single grid cell or area */
grid-template-areas: "overlay-area";
width: 300px;
height: 200px;
border: 2px solid #333;
position: relative; /* For z-index context if not using grid-area implicitly */
}
.background-image, .overlay-text {
grid-area: overlay-area; /* Both items occupy the same grid area */
}
.background-image {
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1; /* Control stacking order */
}
.overlay-text {
display: flex; /* Use flex to center text within the overlay */
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-size: 1.5em;
z-index: 2; /* Ensure text is above image */
}
How it works: This snippet illustrates how CSS Grid can be used to overlay elements. By assigning multiple child items (`.background-image` and `.overlay-text`) to the exact same `grid-area` within a grid container, they will stack on top of each other. The `z-index` property is then used to control their visual stacking order, placing the text overlay on top of the background image.