Is it possible to have different z-index in the same div?

Question

I'm trying to have twice the same text, one above the other. This text is cut by an image.

These texts are in the same div that is centered, but their z-index remains the same.

I tried to change any z-index of my elements.

.bottom {
  font-family: Gotham;
  font-style: normal;
  font-weight: 900;
  font-size: 144px;
  color: #ededed;
  position: absolute;
}

.up {
  font-family: Gotham;
  font-style: normal;
  font-weight: 900;
  font-size: 144px;
  color: transparent;
  -webkit-text-stroke: #ededed 2px;
  z-index: 2;
  position: absolute;
}

.group {
  position: relative;
  width: 465.125px;
  height: 144px;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  margin-top: 30%;
  z-index: 1;
}

<div class="group">
  <p class="up">ZAIUS</p>
  <p class="bottom">ZAIUS</p>
</div>

I want to have the filled text under the image and the stroke text. And the stroke text is supposed to be above the other one and the image.

Answer 1

The z-index property is not required at all to achieve your goal, as you can see in the example below.

Furthermore the z-index should be omitted as long as possible to keep the code clean, reusable, maintainable and expandable.
Of course, in really small projects it is not as important as in larger ones.

#frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.group {
  position: absolute;
  width: 400px;
  height: 250px;
  left: 10%;
  top: 30%;
}

.group img {
  position: absolute;
  top: 0;
  left: 70%;
}

.big-letters {
  font-family: Gotham;
  font-style: normal;
  font-weight: 900;
  font-size: 144px;
  position: absolute;
  top: 0;
  left: 0;
}

.bottom {
  color: #ededed;
}

.up {
  color: transparent;
  -webkit-text-stroke: #ededed 2px;
}

<div id="frame">
  <div class="group">
    <div class="big-letters bottom">LOREM</div>
    <img src="https://via.placeholder.com/300x200"/>
    <div class="big-letters up">LOREM</div>
  </div>
</div>