使内容滑过 h1 视差。 z-index 不适用

Question

我正在尝试使 h1 标签 "Portfolio" 在用户向下滚动时消失在下一部分下方（只是一束紫色）。

我尝试使 h1 文本的 z-index 为 -1，但这会使文本消失在背景图像下方。

如果我为应该滑过文本顶部的内容设置更高的 z-index，h1 "Portfolio" 仍然在顶部。如何在文本 "Portfolio" 上创建视差效果？ http://codepen.io/anon/pen/QNaoyO

如果背景不是图像，而是颜色，如果你能有同样的效果，加分。我目前只有一张颜色的图片作为背景。

HTML

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

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

CSS #portfolioTitle { 文本对齐：居中；宽度：75%；位置：固定；左：50%；左边距：-37.5%； /z-index: -1//让它消失/ }

.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

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

jsBin demo

Answer 2

背景颜色应该与图片一样。

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

使内容滑过 h1 视差。 z-index 不适用

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

html

javascript

css

z-index

parallax