Hero 的 Z-index 问题？也许溢出相关？

Question

这是我的代码的代码笔，因为 Stack Overflow 还不允许 SCSS：https://codepen.io/thedonquixotic/pen/dWXOby

我正在尝试制作一个包含英雄图片和 h1 的部分。

包含部分具有背景渐变。它的 z-index 设置为 1。

包含部分包含一个 img 和一个 h1。 img z-index 设置为 -1 并且过去在渐变背景后面正确渲染。

h1 的 z-index 为 2，应该呈现在图像和渐变之上。

我有这个工作，但后来我添加了一个 JS 视差脚本。我让它工作了。 h1 等仍然可见，但表现得有点奇怪，所以我注释掉了 JS 导入，以专注于确保我的 flex box 东西设置正确。不过现在它根本不起作用了！

body div section.hero {
  display: flex !important;
  width: 100vw;
  height: 81vh;
  background-repeat: no-repeat;
  background-position: center;
  background: linear-gradient(to left, rgba(255, 195, 113, 0.5), rgba(255, 95, 109, 0.5));
  position: relative;
  z-index: 1;
}
body div section.hero div img {
  display: flex !important;
  width: 100vw;
  height: 81vh;
  z-index: -1 !important;
  flex: 1 1 auto;
}
body div section.hero div.svg-flex {
  position: relative;
  display: flex !important;
  padding: 30px;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  z-index: 2;
}
body div section.hero div.svg-flex .hero-text {
  width: 95vw;
  top: 30vh;
  stroke-miterlimit: 10;
  display: flex;
  position: relative;
  overflow: hidden;
  stroke-linejoin: miter;
  font-size: 6rem;
  fill: none;
  stroke: white;
  stroke-width: 2.2px;
}
body div section.hero div.svg-flex h1 {
  position: relative;
  font-family: 'Aller', Arial;
  color: white;
  text-align: center;
  font-size: 3rem;
  line-height: 3rem;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.35);
  max-width: 70rem;
  margin: 2vh auto 0;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  z-index: 2;
}

<section class="hero scene" id="scene" style="display: flex;">
    <div class="layer" style="display: flex;" data-depth="0.40"><img src="https://s-media-cache-ak0.pinimg.com/originals/32/93/21/329321959fcaf0d24e2349ccf8c9407a.jpg">
    </div>



<div class="svg-flex layer" data-depth="0.80" style="display: flex;">
        <h1 class="class-study-title" style="display: flex;"><h1> The Title</h1>
</div>

</section>

Answer 1

将这些 stlyes 添加到 h1

h1 {
        position: absolute;
        top: 0px;

Hero 的 Z-index 问题？也许溢出相关？

Problems with Z-index problems with Hero? Maybe overflow related?

html

css

z-index