html - [CSS]视差效果和固定文字

我在尝试使用w3school "tutorial"之后的视差效果时遇到问题

我想要的是上面有文字标题的背景图片，向下滚动时，下一个面板将位于背景图片和标题上方。

到目前为止，我一直在尝试未成功的标题，但该标题未固定在下一个面板中，如下所示：

screenshot

我尝试在所有部分中使用z-index，但无法使其正常工作。

你有什么错的想法吗？

码：

.banner-section{
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4c/Banksy_lovers.jpg');
  min-height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

p.wanted-name {
	position: fixed;
	margin-left: 35%;
	top:15%;
	pointer-events: none;
	font-family: wanted;
	color:#eeeeee;
	font-size: 12vw;
}

.intro-section {
	padding:100px;
	background-color: white;
	box-shadow: 0 -4px 8px #4d4d4d;
}

.intro-text {
	padding-top: 70px;
}

.intro-text p {
	margin-bottom: 100px;
	text-align: justify;
}

.sub-title{
	color: #868686;
	font-size: 12px;
	margin-bottom: 5px;
	text-transform: uppercase;
}

.sp-title {
	font-size: 30px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 45px;
	letter-spacing: 6px;
}

.button-wanted {
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	padding: 20px;
	text-transform: uppercase;
	color: black;
	font-size: 14px;
}

.button-wanted:link{
	color:black;
}

	<body><!-- Banner section start -->
	<div class="banner-section">
		<p class="wanted-name">Wanted</p>
	</div>
	<!-- End of banner section-->

	<!-- First hint section -->
	<div class="intro-section">
		<div class="container-fluid">
			<div class="row">

		<div class="col-xl-4 intro-text">
		<span class="sub-title">Wanted agency</span>
		<h3 class="sp-title">Simply the best</h3>
		<p>Integer nec bibendum lacus. Suspendisse dictum enim sit amet libero malesuada feugiat. Praesent malesuada congue magna at finibus. In hac habitasse platea dictumst. Curabitur rhoncus auctor eleifend. Fusce venenatis diam urna, eu pharetra arcu varius ac. Etiam cursus turpis lectus, id iaculis risus tempor id.</p>
		<a href="about.html" class="button-wanted">Read More</a>
		</div>

		<div class="col-xl-7 offset-xl-1">
		<img src="https://fr.wikipedia.org/wiki/Banksy#/media/File:Banksy_lovers.jpg" alt="">
		</div>
	</div>
	</div>
	</div>
  </body>

如果我做错了，我以前从未使用过该片段。

谢谢。

问候，

Unic0

最佳答案

您对z-index的使用不起作用的原因是，您的intro-section div的位置相对不正确。

更改以下内容：

.intro-section {
    padding:100px;
    background-color: white;
    box-shadow: 0 -4px 8px #4d4d4d;
    position: relative;
}

z-index仅适用于其position属性已显式设置为绝对，固定或相对的元素-SOURCE

此外，对于文本，您通常不希望使用边距来使文本居中，因为在使用不同浏览器大小（响应度）时，这会引起问题。而是将wanted-name更改为以下内容：

p.wanted-name {
    position: fixed;
    top: 15%;
    pointer-events: none;
    font-family: wanted;
    color: #eeeeee;
    font-size: 12vw;
    left: 0;
    right: 0;
    text-align: center;
}

关于html - [CSS]视差效果和固定文字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53163744/