CSS

Question

我在显示图像时遇到了一些问题。容器有背景图片并且 position 设置为 relative。容器中有文本。我想显示 position 设置为 absolute 的图像。但问题是，如果图像的 z-index 为正，那么它会覆盖文本。如果图像的 z-index 为负，那么它会位于容器的背景图像下方，我看不到图像。

我是 html 和 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;
    }

<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>

Answer 1

<!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>

我更改了一些 HTML 代码并添加了 CSS 以在图像上显示文本 CSS 变化

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

在 HTML 中添加了一个 class 名为 title03

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

CSS - 我想在文字下方显示图片

CSS - I want to show images under text

html

image

z-index