can't display the text with a z index

April 11, 2023

I’m trying to display a text upon the red colored after element with the increased z-index, but it fails. Maybe there is even a better approach to make a red bottom element and a padding
https://codepen.io/alex-filippovich/pen/QWZbXMe

.wrapper {
  margin: 0 auto;
}

.wrapper__img-outer {
  padding: 10px;
  height: 190px;
  width: 330px;
  background: center / cover no-repeat url("https://place-hold.it/330x190");
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wrapper__img-outer:after {
  content: '';
  background-color: red;
  position: absolute;
  width: 100%;
  height: 54px;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.text {
  z-index: 10;
}

<div class="wrapper">
  <div class="wrapper__img-outer">
    <div class="wrapper__img-top">
      <p class="text">text</p>
    </div>
    <div class="wrapper__img-bottom">
      <p class="text">text</p> // this text not being displayed
    </div>
  </div>
</div>

>Solution :

You’ll need to set position to relative on the text class:

.text {
    z-index: 10;
    position: relative;
}

.wrapper {
  margin: 0 auto;
}
.wrapper__img-outer {
  padding: 10px;
  height: 190px;
  width: 330px;
  background: center / cover no-repeat url("https://place-hold.it/330x190");
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wrapper__img-outer:after {
  content: '';
  background-color: red;
  position: absolute;
  width: 100%;
  height: 54px;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.text {
  z-index: 10;
  position: relative;
}

<div class="wrapper">
    <div class="wrapper__img-outer">
        <div class="wrapper__img-top">
            <p class="text">Top text</p>
        </div>
        <div class="wrapper__img-bottom">
            <p class="text">Bottom text</p>
        </div>
    </div>
</div>