CSS
CSS Grid: Overlapping Elements with `grid-area`
Achieve complex overlapping layouts by assigning multiple elements to the same named `grid-area`, enabling dynamic visual effects and layered designs with CSS Grid.
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: "stack";
width: 300px;
height: 200px;
border: 1px solid #ccc;
position: relative; /* For z-index context */
}
.item {
grid-area: stack; /* Both items occupy the same grid area */
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: white;
}
.item-1 {
background-color: rgba(255, 0, 0, 0.7);
z-index: 2;
transform: translateX(-10px) translateY(-10px); /* Example offset */
}
.item-2 {
background-color: rgba(0, 0, 255, 0.7);
z-index: 1;
transform: translateX(10px) translateY(10px); /* Example offset */
}
How it works: This snippet demonstrates how to create overlapping elements using CSS Grid. By defining a single `grid-template-areas: "stack"` and then assigning `grid-area: stack` to multiple child elements, all children will occupy the exact same grid cell. You can then use `z-index`, `transform`, or `position` properties to control their visual layering and relative placement within that shared space.