How to overlap elements in grid in css

CssHow-ToBeginner · 3 min read

How to Overlap Elements in CSS Grid: Simple Guide

To overlap elements in CSS Grid, place multiple grid items on the same grid cell by assigning them the same grid-row and grid-column values. Use z-index to control which element appears on top.

📐

Syntax

In CSS Grid, overlapping happens when two or more items share the same grid area. You use grid-row-start, grid-row-end, grid-column-start, and grid-column-end to position items. The z-index property controls stacking order.

grid-row-start and grid-row-end: define vertical placement.
grid-column-start and grid-column-end: define horizontal placement.
z-index: higher values appear on top.

css

.item {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
  position: relative;
  z-index: 1;
}

💻

Example

This example shows two boxes overlapping in the same grid cell. The red box is below, and the blue box is on top because it has a higher z-index.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Overlap Elements in CSS Grid</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: 150px 150px;
    grid-template-rows: 150px 150px;
    gap: 10px;
    position: relative;
  }
  .box {
    width: 150px;
    height: 150px;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    position: relative;
  }
  .red {
    background-color: crimson;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    z-index: 1;
  }
  .blue {
    background-color: royalblue;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    z-index: 2;
    opacity: 0.8;
  }
</style>
</head>
<body>
  <div class="grid-container">
    <div class="box red">Red Box</div>
    <div class="box blue">Blue Box</div>
  </div>
</body>
</html>

Output

Two colored boxes (red and blue) stacked exactly on top of each other in the top-left grid cell, with the blue box partially transparent and visible above the red box.

⚠️

Common Pitfalls

Common mistakes when overlapping grid elements include:

Not assigning the same grid area or grid lines to both elements, so they don't overlap.
Forgetting to set position or z-index, which can cause unexpected stacking order.
Using negative z-index values without understanding browser stacking context.

Always ensure overlapping items share the same grid cell and use z-index with position set to relative or absolute for layering.

css

.box {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  /* Missing position: relative; */
  z-index: 2; /* This won't work as expected without position */
}

/* Corrected version */
.box {
  position: relative;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  z-index: 2;
}

📊

Quick Reference

Overlap by placing items in the same grid cell: Use identical grid-row and grid-column values.
Control stacking order: Use position: relative and z-index.
Use opacity or background colors to see overlapping clearly.
Remember: Grid container must have display: grid.

✅

Key Takeaways

Overlap grid items by assigning them the same grid row and column positions.

Use position relative and z-index to control which element appears on top.

Without position set, z-index will not affect stacking order.

Ensure the grid container uses display: grid for layout to work.

Opacity and background colors help visualize overlapping elements.