滚动时如何让文本与背景图像保持固定？

Question

我有一个登录页面，其中包含我网站的标题、一个 sub-header 和一个按钮。我用 background-attachment 固定了背景图像，这样当您向上滚动时它会保持在原位。

我希望我的标题、子 header 和按钮保留在原位，以便概览部分与其重叠。我尝试将文本设置为固定位置并制作 z-index: -1，但它位于背景图像后面并出现在概述部分。 https://codepen.io/anon/pen/qmdzzz

文本被包裹在 intro-text div

@media (min-width: 768px){
  header .intro-text {
    padding-top: 300px;
    padding-bottom: 200px;
    position: fixed;
    z-index: -1
  }
}

然后我尝试为概述部分

设置更高的 z-index

#overview {
  z-index: 1000; 
}

Answer 1

您的 .intro-text class 必须有一个属性:

position:fixed

为了与背景图片保持固定。

Answer 2

您需要使位置与您的#overview 相关。并设置背景颜色。也就是说。

#overview {background-color: #fff;position: relative}

删除 z-index: -1 来自 header .intro-text 我还为你制作了一支笔。你可以去那边看看

How to have text stay fixed with background image while scrolling?