我有一个着陆页,其中包含我网站的标题、一个子标题和一个按钮。我使用 background-attachment
固定了背景图像,这样当您向上滚动时它会留在原地。
我希望我的标题、子标题和按钮保留在原位,以便概述部分与它们重叠。我尝试将文本设置为固定位置并制作 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;
}
最佳答案
您需要使位置与您的#overview 相关。并设置背景颜色。这意味着。
#overview {background-color: #fff;position: relative}
从标题 .intro-text 中删除 z-index: -1 我还为你制作了一支笔。你可以去那里看看。
关于html - 滚动时如何让文本与背景图像保持固定?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43457008/