Make content slide over h1 parallax. z-index won't apply

I'm trying to make the h1 tag, "Portfolio" disappear underneath the next section (just a bunch of purple) as the user scrolls down.

I tried making the h1 text have a z-index of -1, but that makes the text disappear underneath the background image.

If I set the z-index higher for the content that should slide over top of the text, the h1 "Portfolio" is still on top. How can I create the parallax effect on the text "Portfolio"? http://codepen.io/anon/pen/QNaoyO

Bonus points if you can have the same effect if the background is NOT an image, but a color. I currently just have a picture of a color as the background.

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; width: 75%; position: fixed; left: 50%; margin-left: -37.5%; /z-index: -1//makes it disappear/ }

.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;
}

Solution

Background colors should work just the same as images.

#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>