Question

所以我创建了Navbar，通过点击跳转到页面上的部分。它适用于我的项目＆＃39;和＆＃39;联系＆＃39;部分，但当我点击＆＃39;关于＆＃39;导航栏跳转到它，但变得透明且无法点击。我尝试添加一个padding-top X px;关于＆＃39;关于＆＃39;元素，但它仍然无法运作。

Codepen中的代码如下： HTML：

<body>
<div class="fluid-container">
<h2> My Web Portfolio</h2>

<!--Creates the Navigation bar -->

<div class="navbar">
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact" style="float:right">Contact</a>
</div>

<!-- this creates the About section-->
<div class="main">
<div id=about>
<h3>Blank</h3>
</div>

<!-- This creates the 'project' section of the webpage-->

<div id=projects>
<h3><pre>My tribute page to Neil Armstrong<pre></h3>
<a href="#"><img border="0" alt="My Tribute page" align="center" src="#"/>                
     </a>
</div>

<!--contact section-->
<div id=contact>
<h3>Contact me via Facebook, Twitter, and Instagram!<h3>
<a href="#" class="fa fa-facebook" ></a>
   <a href="#" class="fa fa-twitter"></a>
   <a href="#" class="fa fa-instagram"></a>
     </div>
   </div>
    </div> 
</body>

CSS：

body {
background-color:turquoise;
padding-top:25px;
}

h2 {  
text-align:center;
}
.navbar {
overflow:hidden;
background-color:#333;
position:fixed;
top:0px;
 width:100%;
 }
.navbar a {
float:left;
display:block;
color:#f2f2f2;
text-align:center;
padding:14px 16px;
text-decoration:none;
font-size:17px;
}

.main {
padding:16px;
margin-top:65px;
}

#projects {
position:relatve;
width:150px;
height:100px;
margin-top:200px;
margin-left:150px;
}

#contact {
position:relatve;
text-align:center;
margin-top:800px;
}

#about{
position:relative;
text-align:center;
padding-top:25px;
}

我在这里做错了什么？

Answer 1

当页面跳转到 about 时，这些部分会遮挡导航栏。如果将z-index设置为#main和导航栏，则可以确保导航栏始终位于各个部分之上。我希望这有帮助。

＆＃13;

body {
  background-color: turquoise;
  padding-top: 25px;
}

h2 {
  text-align: center;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 10;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.main {
  padding: 16px;
  position: relative;
  z-index: 0
  margin-top: 65px;
}

#projects {
  position: relatve;
  width: 150px;
  height: 100px;
  margin-top: 200px;
  margin-left: 150px;
}

#contact {
  position: relatve;
  text-align: center;
  margin-top: 800px;
}

#about {
  position: relative;
  text-align: center;
  padding-top: 25px;
}

＆＃13;

<body>
<div class="fluid-container">
<h2> My Web Portfolio</h2>

<!--Creates the Navigation bar -->

<div class="navbar">
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact" style="float:right">Contact</a>
</div>

<!-- this creates the About section-->
<div class="main">
<div id=about>
<h3>Blank</h3>
</div>

<!-- This creates the 'project' section of the webpage-->

<div id=projects>
<h3><pre>My tribute page to Neil Armstrong<pre></h3>
<a href="#"><img border="0" alt="My Tribute page" align="center" src="#"/>                
     </a>
</div>

<!--contact section-->
<div id=contact>
<h3>Contact me via Facebook, Twitter, and Instagram!<h3>
<a href="#" class="fa fa-facebook" ></a>
   <a href="#" class="fa fa-twitter"></a>
   <a href="#" class="fa fa-instagram"></a>
     </div>
   </div>
    </div> 
</body>

＆＃13;

固定导航栏重叠<div>元素，导致Navbar停止工作

1 个答案: