Question

我已经建立了一个基本的视差网站，我希望在屏幕的右上方放置一个简单的导航栏。当我在浏览器中加载网站时，该链接（目前链接到＃）将不允许我单击该链接，直到我到达课程.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以及本网站的新手。

Answer 1

尝试为您的导航栏类更新z-index：

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

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

1 个答案: