CSS - I want to show images under text

I have some problems in showing an image. The container has background image and the position is set to relative. The container has text in it. I want to show an image that has position set to absolute. But the problem is that if the image has a positive z-index, then it covers the text. If the image has negative z-index, then it goes under the container's background image and I cannot see the image.

I am a beginner in html and css. So someone knows can help me? I am sorry about my poor English.

.banner {
        background: url(../img/Banner-back.png) center center no-repeat;
        background-size: cover;
        text-align: center;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans JP;
        position: relative;
    }
    .banner-content {
        z-index: 1
    }
    .creative {
        position: absolute;
        z-index: 0;
    }
    .text-shadow {
        text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
    .text-shadow01 {
        text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white, 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    .text-shadow02 {
        text-shadow: -3px 0 10px white, 0 3px 10px white, 3px 0 10px white, 0 -3px 10px white, 0 0 10px white;
    }
    .underline-text {
        background: url(../img/underline.png) no-repeat;
        background-size: 100% 20px;
        background-position: bottom;
        padding: 0.25rem;
    }
    .title01 {
        font-size: 4.5rem;
    }
    .title02 {
        font-size: 2.8rem;
    }
    .banner-content {
        margin-left: 25vw;
        text-align: left;
    }
    .creative {
        width: 43%;
        top: 6vw;
        right: 40vw;
    }

<div class="banner">
  <div class="bg-green d-flex align-items-center justify-center">
    <div class="banner-left"></div>
    <div class="text-shadow text-white h1 p-3 mb-5">This is my header.</div>
    <div class="banner-right"></div>
  </div>
  <div class="banner-content">
    <div><img src="assets/img/Banner01.png"></div>
    <div class="h1 mt-4">Promise</div>
    <div class="title01 text-green text-shadow01">Hiquality</div>
    <div class="title01 text-green text-shadow01">Sample text</div>
    <div class="title02 text-shadow02">Sample text</div>
    <div class="title02 text-shadow02" style="z-index: 1000">Sample text</div>
  </div>
  <div class="scroll-div">
    <img class="scroll-bar" src="assets/img/Scroll-bar.png">
  </div>
  <div class="creative"><img src="assets/img/creative-team.png"></div>
</div>

Solution

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
        
.banner {
    background: url(../img/Banner-back.png) center center no-repeat;
    background-size: cover;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-family: Source Han Sans JP;
    position: relative;
}
.banner-content {
    z-index: 1
}
.creative {
    position: absolute;
    z-index: 0;
}
.text-shadow {
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.text-shadow01 {
    text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white, 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.text-shadow02 {
    text-shadow: -3px 0 10px white, 0 3px 10px white, 3px 0 10px white, 0 -3px 10px white, 0 0 10px white;
}
.underline-text {
    background: url(../img/underline.png) no-repeat;
    background-size: 100% 20px;
    background-position: bottom;
    padding: 0.25rem;
}
.title01 {
    font-size: 4.5rem;
}
.title02 {
    font-size: 2.8rem;
}
.banner-content {
    margin-left: 25vw;
    text-align: left;
}
.creative {
    width: 43%;
    top: 6vw;
    right: 40vw;
}

.title03 {
    padding: 263px !important;
}

.title01 {
    font-size: 4.5rem;
    position: absolute;
    overflow: hidden;
    z-index: 9999;
    padding: 108px;
    position: absolute;
    overflow: hidden;
  
}

    </style>
</head>
<body>

<div class="banner">
    <div class="bg-green d-flex align-items-center justify-center">
        <div class="banner-left"></div>
        <div class="text-shadow text-white h1 p-3 mb-5">This is my header.</div>
        <div class="banner-right"></div>
    </div>
    <div class="banner-content">
        <div><img src="assets/img/Banner01.png"></div>
        <div class="h1 mt-4">Promise</div>
        <div class="title01 text-green text-shadow01">Hiquality</div>
        <div class="title01 title03 text-green text-shadow01">Sample text</div>
        <div class="title02 text-shadow02">Sample text</div>
        <div class="title02 text-shadow02" style="z-index: 1000">Sample text</div>
    </div>
    <div class="scroll-div">
        <img class="scroll-bar" src="https://www.jqueryscript.net/images/User-Friendly-Date-Formatting-Plugin-prettydate.jpg">
    </div>
    <div class="creative"><img src="https://www.jqueryscript.net/images/User-Friendly-Date-Formatting-Plugin-prettydate.jpg"></div>
</div>
</body>
</html>

I have changed some HTML code and added CSS to display text on the image CSS changes

.title03 {
    padding: 263px !important;
}
.title01 {
    font-size: 4.5rem;
    position: absolute;
    overflow: hidden;
    z-index: 9999;
    padding: 108px;
    position: absolute;
    overflow: hidden;
}

in HTML added one class called title03

<div class="title01 title03 text-green text-shadow01">Sample text</div>