z-index 可以在移动设备上使用 header cta 文本，但可以在桌面设备上使用吗？

Question

header cta 在桌面上工作，当我切换到移动设备时没有任何反应

我尝试在 html 中增加 z-index 数字，而不是 sheet

样式

这是 html 我有号召性用语的地方：号召性用语包含在三个跨度内：

.banner::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #333;
  background-image: linear-gradient(to right, #0052d4, #4364f4), #6fb1fc;
  position: absolute;
  top: 12%;
  left: 8;
  opacity: .7;
  z-index: 8;
}

@supports(mix-blend-mode: hand-light) {
  .banner::after {
    opacity: 1;
  }
}

.banner>* {
  z-index: 10;
  position: relative;
}

<div class="hero-wrap js-fullheight">
  <div class="container-fluid px-0 banner-z">

    <div class="row d-md-flex no-gutters slider-text align-items-center js-fullheight justify-content-end banner banner-z">

      <img class="one-third js-fullheight align-self-end order-md-last img-fluid" src="images/1.png" alt=" Get Your Business Online">

      <div class="one-forth d-flex align-items-center ftco-animate js-fullheight">
        <div class="text mt-5">
          <span class="subheading"></span>
          <h1 class="mb-3">
            <span>LOVE,</span>
            <span>CODE, </span>
            <span>SLEEP</span>
          </h1>
          <p style="color:  #f9d53e ;">
            <b>offer affordable set of services to our clients.</b>
          </p>
          <p>
            <a href="contact.html" class="btn btn-primary px-4 py-3">Get in touch</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

为 .hero-wrap .slider-text .one-forth

添加 z-index

.hero-wrap .slider-text .one-forth{
   z-index:9;
}

z-index 可以在移动设备上使用 header cta 文本，但可以在桌面设备上使用吗？

the z-index does work on mobile for the header cta text but works on desktop?

html

css

z-index