我将导航栏固定在顶部。滚动时，几乎所有东西都在下
注意：要观察此问题，请添加任意内容，以便您可以滚动页面。
以下是代码：https://jsfiddle.net/q8prw19c/1/
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
color: #fff;
padding: 18px;
font-size: 3em;
letter-spacing: 10px;}
.parallax {
background-image: url("http://www.firsthdwallpapers.com/uploads/2014/03/hd-wallpapers-wide-pack-41-20.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.topnav {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
font-size: 17px;
}<div class="topnav" id="myTopnav">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div class="parallax">
<div class="caption">
<span class="border">test</span>
</div>
</div>
答案 0 :(得分：1)
尝试将“z-index”css prop添加到绝对定位的元素中。
答案 1 :(得分：0)
给.topnav更高的z-index。
答案 2 :(得分：0)
我给身体一个z-index为1而你的#topnav元素的z-index为2，这样它就会在你添加到你网站的所有内容之上。
html, body {
margin: 0;
height: 100%;
}
body {
z-index: 1;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
color: #fff;
padding: 18px;
font-size: 3em;
letter-spacing: 10px;
}
.aboutMe{
z-index:2;
}
.parallax {
background-image: url("http://www.firsthdwallpapers.com/uploads/2014/03/hd-wallpapers-wide-pack-41-20.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.topnav {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
overflow: hidden;
z-index:2;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}<html>
</html><body>
<div class="topnav" id="myTopnav">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div class="parallax">
<div class="caption">
<span class="border">test</span>
</div>
</div>
<div class="aboutMe">test</div>
<pre>
1
2
3
4
5
6
7
8
9
10
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
</pre>
</body>
</html>
答案 3 :(得分：-1)
请参阅更新：
html, body {
margin: 0;
height: 100%;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
color: #fff;
padding: 18px;
font-size: 3em;
letter-spacing: 10px;
}
.aboutMe{
z-index:2;
}
.parallax {
background-image: url("http://www.firsthdwallpapers.com/uploads/2014/03/hd-wallpapers-wide-pack-41-20.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.topnav {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
overflow: hidden;
z-index:99;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}<html>
</html><body>
<div class="topnav" id="myTopnav">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div class="parallax">
<div class="caption">
<span class="border">test</span>
</div>
</div>
<div class="aboutMe">test</div>
<pre>
1
2
3
4
5
6
7
8
9
10
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
</pre>
</body>
</html>