为什么我的导航栏不允许我单击链接,直到它到达某个元素?



我已经做了一个基本的视差网站,我想在屏幕的右上角放一个简单的导航栏。当我在浏览器中加载网站时,链接(目前链接到#(不允许我单击它,直到我到达类.section。如果它触摸任何具有视差效果的图像,它将变得不透明,并且不允许我单击。我有一种感觉,这与放置不当有关,即使我移动它似乎也没有效果。它也不会向右浮动。以下是一些HTML和CSS:

body, html {
height: 100%;
	margin:0;
	font-size: 16px;
	font-family: "Lato", sans-serif;
	font-weight: 400;
	line-height: 1.8em;
	color:#666;
}
.navbar {
	list-style: none;
	color:#779cd8;
	position:fixed;
	float: right;
	margin-right: 20px;
}
.pimg1, .pimg2, .pimg3{
	position:relative;
	opacity:0.70;
	background-position: center;
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment: fixed;
}
.pimg1 {
	background-image: url('../AlignedResonance/mountainsvg.svg');
	min-height: 100%;
}
.pimg2 {
	background-image: url('../AlignedResonance/tree.jpg');
	min-height: 400px;
}
.pimg3 {
	background-image: url('../AlignedResonance/lake.jpg');
	min-height: 400px;
}
.section {
	text-align:center;
	padding: 50px 80px;
}
.section-light {
	background-color: #f4f4f4;
	color:#666;
}
.section-dark {
	background-color: #282e34;
	color:#ddd;
}
.ptext {
	position:absolute;
	top:50%;
	width: 100%;
	text-align: center;
	color:black;
	font-size: 27px;
	letter-spacing: 8px;
	text-transform:uppercase;
}
.ptext .border {
	background-color: #111;
	color: #fff;
	padding:20px;
}
<!DOCTYPE html>
<html>
<head>
	    <title>Aligned Resonance</title>
	    <link rel="stylesheet" type="text/css" href="../AlignedResonance/style.css">
</head>
<body>
	    <ul class="navbar">
		    <li><a href="#">Home</a></li>
	    </ul>
	    <div class="pimg1">
		    <!-- class ptext -->
		    <div class="ptext">
			    <span>
				    Aligned Resonance
			    </span>
		    </div>
	    </div>
	    <section class="section section-light">
		    <h2>Section One</h2>
		    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	    </section>
	    <div class="pimg2">
		    <div class="ptext">
			    <span class="border">
				    Text 2
			    </span>
		    </div>
	    </div>
	    <section class="section section-dark">
		    <h2>Section One</h2>
		    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	    </section>
	    <div class="pimg3">
		    <div class="ptext">
			    <span class="border">
				    Text 3
			    </span>
		    </div>
	    </div>
	    <section class="section section-dark">
		    <h2>Section One</h2>
		    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	    </section>
	    <div class="pimg1">
		    <div class="ptext">
			    <span>
				    Aligned Resonance
			    </span>
		    </div>
	    </div> 
</body>
</html>

抱歉,如果我没有正确的格式等,因为我是HTML和这个网站的新手。

尝试更新导航栏类的 z 索引:

.navbar {
list-style: none;
color:#779cd8;
position:fixed;
float: right;
margin-right: 20px;
z-index: 1;
}

最新更新