Problèmes avec les problèmes d'index Z avec Hero? Peut-être que débordement lié?

Question

est ici un codepen de mon code, car le débordement de pile ne permet pas encore SCSS: https://codepen.io/thedonquixotic/pen/dWXOby

Je suis en train de faire une section qui contient une image de héros et un h1.

La section contenant a un gradient d'arrière-plan. Son z-index est mis à 1.

La section contenant contient un img et un h1. L'img z-index est défini sur -1 et a été rendu correctement dans le passé derrière l'arrière-plan du dégradé.

Le h1 a un indice z de 2 et devrait rendre au-dessus de l'image et du gradient.

J'ai eu ce travail mais j'ai ensuite ajouté dans un script de parallaxe JS. Je l'ai fait fonctionner. Le h1 etc était toujours visible mais agissant un peu bizarre, donc j'ai commenté l'importation JS pour se concentrer sur m'assurer que mes trucs de boîte flex étaient correctement réglés. Maintenant, ça ne marche pas du tout!

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

Ajouter ces stlyes à h1

h1 { 
     position: absolute; 
     top: 0px;