CSS
Create Overlapping Elements with Precision using CSS Grid
Unleash creative and modern web designs by learning how to precisely position and overlap multiple elements on the same grid cell using CSS Grid's explicit placement properties and z-index.
.overlap-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: 10px;
width: 400px;
height: 300px;
border: 2px solid #333;
position: relative; /* For z-index context if needed */
}
.item-background {
grid-column: 1 / 3; /* Spans all columns */
grid-row: 1 / 2; /* Stays in the first row */
background-color: #a7d9f7;
padding: 20px;
z-index: 1;
}
.item-foreground {
grid-column: 1 / 3; /* Also spans all columns */
grid-row: 1 / 2; /* Also stays in the first row, creating overlap */
background-color: rgba(255, 255, 255, 0.8);
padding: 30px;
text-align: center;
z-index: 2; /* Ensures this item is on top */
border: 1px dashed #000;
}
How it works: This snippet demonstrates how to overlap elements using CSS Grid. Both `.item-background` and `.item-foreground` are placed within the same grid cells by assigning them identical `grid-column` and `grid-row` values. `grid-column: 1 / 3;` tells an item to start at grid line 1 and end before grid line 3 (spanning two columns). The `z-index` property is then used to control the stacking order: an item with a higher `z-index` value will appear on top of items with lower values, enabling precise control over the visual hierarchy of the overlapping content.