Revision history [back]

You can use the CSS z-index property to control the stacking order of elements within a grid layout group. The higher the z-index value, the closer the element will appear to the front of other elements.

For example, let's say you want to make a specific item in a grid layout appear above others:

HTML:

<div class="grid">
  <div class="item" id="top-item">This should appear on top</div>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

CSS:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

#top-item {
  z-index: 999;
}

In this example, we give the element with the ID of top-item a higher z-index value than the other elements, which will make it appear on top of the others.

Note: the z-index property only works on positioned elements (e.g. elements with position: absolute, position: relative, or position: fixed), so be sure to position the element you want to stack above the others appropriately.