How to make the black box be below the red one and above the gray background?

Question

I've tried z-index to be -1 in the pseudo before but it went below the background. is there a way to retrace it behind the red box only?

* {
  box-sizing: border-box;
  margin: 0;
}

.start {
  background-color: gray;
  width: 100%;
  height: 100vh;
}

.start div {
  background-color: red;
  width: 400px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}

.start div::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: -50px;
  background-color: black;
}

<div class="start">
    <div></div>
  </div>