Hier ist ein codepen meines Codes, da Stack-Überlauf SCSS noch nicht erlauben: https://codepen.io/thedonquixotic/pen/dWXObyProbleme mit Z-Index-Problemen bei Hero? Vielleicht Überlauf bezogen?
ich einen Abschnitt zu machen versuchen, die einen Helden Bild und einen h1 enthält.
Der enthaltene Abschnitt hat einen Hintergrundgradienten. Es ist z-Index auf 1 gesetzt.
Der enthaltene Abschnitt enthält eine img und eine h1. Der img z-index wird auf -1 gesetzt und in der Vergangenheit korrekt hinter dem Hintergrund mit Farbverlauf gerendert.
Die h1 hat einen Z-Index von 2 und sollte über dem Bild und dem Farbverlauf rendern.
Ich hatte dies funktioniert, aber dann habe ich in einem JS Parallax-Skript hinzugefügt. Ich habe es funktioniert. Die h1 usw. war immer noch sichtbar, aber irgendwie komisch, also habe ich den JS-Import auskommentiert, um mich darauf zu konzentrieren, dass ich meine Flex-Box-Sachen richtig eingestellt habe. Jetzt funktioniert es überhaupt nicht!
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>
Warum braucht man es absolut zu sein wie das sichtbar zu sein? –
Ich habe diese Änderungen im Code-Stift vorgenommen und scheint das Problem nicht zu beheben. –
@ DavidA.French - mein Fehler, wenden Sie den Stil auf h1 nicht 'div.svg-flex'. –