<div class="this-element">
  This Element
</div>

<div class="slightly-behind">
  Slightly Behind
</div>
:root {
  --z1: 100;
  --z2: 200;
  --z3: 300;
  --z4: 400;
  --z5: 500;
  --z6: 600;
  --z7: 700;
  --z8: 800;
  --z9: 900;
  --z10: 1000;
}

.this-element {
  z-index: var(--z1);
}

.slightly-behind {
  z-index: calc(var(--z1) - 1);
}

/* Extra Styling */
.this-element {
  height: 10rem;
  width: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  background-color: lime;
  position: absolute;
}

.slightly-behind {
  position: absolute;
  top: 6rem;
  left: 6rem;
  height: 10rem;
  width: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  background-color: dodgerblue;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.