Lassen Sie den Inhalt über h1 Parallaxe gleiten. Z-Index wird nicht angewendet

Question

Ich versuche, das H1-Tag, "Portfolio" unter dem nächsten Abschnitt (nur ein paar lila) verschwinden, wie der Benutzer nach unten scrollt.

Ich habe versucht, die h1 Text haben einen Z-Index von -1, aber das macht den Text unter dem Hintergrundbild verschwinden.

Wenn ich den Z-Index für den Inhalt, der über den oberen Rand des Textes gleiten soll, höher setze, ist das h1 "Portfolio" immer noch oben. Wie kann ich den Parallax-Effekt für den Text "Portfolio" erstellen? http://codepen.io/anon/pen/QNaoyO

Bonuspunkte, wenn Sie den gleichen Effekt haben, wenn der Hintergrund kein Bild, sondern eine Farbe ist. Ich habe gerade ein Bild von einer Farbe als Hintergrund.

HTML

<div id="portfolio"><h1 id="portfolioTitle">Portfolio</h1></div> 

<section class="mainContent" style="height: 600px; background-color: purple;"></div> 

CSS #portfolioTitle { text-align: center; Breite: 75%; Position: fixiert; links: 50%; Rand links: -37,5%; /z-index: -1 // macht es/ verschwinden}

.mainContent { 
    z-index: 10; 
} 

#portfolio { 
    /*background-color: #27f5eb;*/ 
    /*background-color: #DD67F5;*/ 
    background-image: url(https://www.startupinacar.com/wp-content/uploads/2016/04/blackjackPic.png); 
    height: 300px; 
    /*position: fixed;*/ 
    background-attachment: fixed; 
    width: 100%; 
    z-index: 10; 
} 

Answer 1

Hintergrundfarben sollten genauso wie Bilder funktionieren.

#portfolio { 
 
    height: 300px; 
 
    position: fixed; 
 
    z-index: 1; 
 
    background: #27f5eb; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
.mainContent { 
 
    z-index: 2; 
 
    position: relative; 
 
    z-index: 2; 
 
    height: 1000px; 
 
    background: purple; 
 
    margin-top: 300px; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
} 
 

 
body {margin: 0; padding: 0;}

<div id="portfolio"> 
 
    <h1>Portfolio</h1> 
 
</div> 
 

 
<section class="mainContent"> 
 
</div>

Answer 2

.mainContent { 
    position:relative; /* you're missing a position */ 
    z-index: 10;  /* in order for z-index to apply */ 
} 

jsBin demo