<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Grid layout and <code>z-index</code></h1>
      <figure class="callout">
        <p>
          In a grid context like this, you can modify <code>z-index</code> without
          having to add <code>position: relative</code>.
        </p>
      </figure>
      <div class="demo">
        <div class="demo-box"><code>z-index: 3;</code></div>
        <div class="demo-box"><code>z-index: 1;</code></div>
        <div class="demo-box"><code>z-index: 2;</code></div>
      </div>
    </article>
  </div>
</main>
.demo {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  max-width: 500px;
}

.demo > * {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  width: 250px;
  height: 200px;
  padding: 1em;
  opacity: 0.75;
  box-shadow: 0 -1px 10px rgb(0 0 0 / 60%);
}

.demo > :first-child {
  background: aliceblue;
  border: 2px solid lightblue;
  z-index: 3;
  grid-column: 1/2;
}

.demo > :nth-child(2) {
  background: pink;
  border: 2px solid hotpink;
  z-index: 1;
  grid-column: 3/4;
}

.demo > :last-child {
  background: wheat;
  border: 2px solid gold;
  z-index: 2;
  grid-column: 4/5;
}

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.