ヒーローとのZ-インデックス問題の問題？たぶん、オーバーフローに関連する？

Question

スタックオーバーフローでSCSSがまだ許可されていないので、コードのコードを以下に示します。https://codepen.io/thedonquixotic/pen/dWXOby

ヒーローイメージとh1を含むセクションを作成しようとしています。

包含セクションに背景勾配があります。 z-indexは1に設定されています。

包含セクションにはimgとh1が含まれています。 img z-indexは-1に設定されており、過去にはグラデーションの背景に適切にレンダリングされています。

h1のzインデックスは2で、画像とグラデーションの両方の上にレンダリングする必要があります。

私はこの作業をしましたが、JS視差スクリプトを追加しました。私はそれを働かせた。 h1などはまだ見えていましたが、私はフレックスボックスのものが正しく設定されていることを確認することに焦点を当ててJSのインポートをコメントしたので、奇妙な演技の種類。今は全く動かない！

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

なぜそれがそのような閲覧可能であることを絶対的である必要はない

h1 { 
     position: absolute; 
     top: 0px;