How CSS Grid Handles Overlapping Items

This article explains how CSS Grid resolves overlapping elements placed on identical track coordinates, detailing the default stacking order, the native support for the z-index property, and how positioning interacts within the grid formatting context. By understanding these rendering mechanisms, developers can precisely control multi-layered designs, background-content overlays, and complex component layouts using purely CSS Grid.

The Stacking Mechanism in CSS Grid

When multiple grid items share the same row and column coordinates, CSS Grid allows them to occupy the exact same space rather than pushing each other down the page. The browser resolves these collisions using standard CSS stacking rules tailored for grid formatting contexts.

1. Default Stacking by Source Order

By default, if no stacking properties are explicitly assigned, the browser layers overlapping items according to their order in the HTML document. An element that appears later in the DOM will visually render on top of an element that appears earlier.

For example, consider two items placed in the same cell:

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.item-a {
  grid-column: 1;
  grid-row: 1;
}

.item-b {
  grid-column: 1;
  grid-row: 1;
}

If .item-a precedes .item-b in the markup, .item-b renders on top, partially or fully covering .item-a.

2. Layer Control Using z-index

In standard block layouts, an element must have a non-static position (such as relative or absolute) for the z-index property to take effect. In CSS Grid, however, grid items are automatically treated as potential stacking contexts.

You can apply z-index directly to any grid item without declaring a position property:

.item-a {
  grid-column: 1;
  grid-row: 1;
  z-index: 2; /* Renders on top */
}

.item-b {
  grid-column: 1;
  grid-row: 1;
  z-index: 1; /* Renders underneath */
}

An item with a higher z-index integer will always display above items with lower values or items left at the default z-index: auto, regardless of source order.

Track Sizing and Item Alignment

When multiple items occupy identical tracks, their sizing behavior depends on how track dimensions are defined:

• Fixed/Fractional Tracks (px, fr): The track size is rigid or proportional. Both overlapping items will conform to the cell dimensions unless their content overflows.
• Intrinsically Sized Tracks (auto, min-content, max-content): The track expands to accommodate the largest item sharing those coordinates.

Items on identical coordinates do not need to share the exact same dimensions. Using justify-self and align-self, individual items can be positioned independently inside the shared cell (e.g., pinning one item to the center and another to the bottom-right), creating layered user interface components such as image captions, badges, or full-bleed cards.