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

<div class="slightly-behind">
  Slightly Behind
</div>
$z-index: (
  1: 100,
  2: 200,
  3: 300,
  4: 400,
  5: 500,
  6: 600,
  7: 700,
  8: 800,
  9: 900,
  10: 1000
);

@function z($level) {
  @return map-get($z-index, $level);
}

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

.slightly-behind {
  z-index: z(1) - 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;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.