HTML 导航栏链接不可点击

Question

This past week I've been learning HTML and CSS and decided to mess around with a navigation bar.上周我一直在学习 HTML 和 CSS，并决定弄乱导航栏。 I have it all set up but now the links up top are not clickable?我已经设置好了，但现在顶部的链接不可点击？ I've checked to make sure I didn't miss anything basic like a closing tag but couldn't find anything like that.我已经检查过以确保我没有错过任何基本的东西，比如结束标签，但找不到类似的东西。

 * { margin: 0; padding: 0; } html { background-color: #808080; background-image: url("https://hdqwalls.com/download/simple-gray-abstract-background-wi-1920x1080.jpg"); background-repeat: no-repeat; } #landing__container { height: 100vh; width: 100%; } header { display: flex; justify-content: center; align-items: center; background-color: rgba(255, 0, 0, 0.4); } header h1 { color: white; font-family: impact; font-weight: normal; } header ul { display: flex; justify-content: flex-end; align-items: center; height: 30px; } header ul li { list-style: none; } header a { font-family: helvetica; font-weight: bold; font-size: 18px; text-decoration: none; color: white; margin: 30px; } #landing__center { display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; top: 0; bottom: 0; left: 0; right: 0; position: absolute; } #landing__center h2 { padding-bottom: 20px; color: white; font-family: Impact; font-weight: normal; font-size: 40px; } #landing__center p { padding-top: 20px; color: white; font-family: helvetica; font-weight: normal; font-size: 20px; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Navigation Bar Practice</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="landing__container"> <!-- Navigation Bar --> <header> <nav id="nav__bar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Documentation</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <section id="landing__center"> <h2>Testing</h2> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem voluptatum asperiores illum maiores aliquid quo perferendis, blanditiis facere temporibus laudantium! </p> </section> </div> </body> </html>

I know the code may not be perfect and/or clean but keep in mind I have been doing this for a week.我知道代码可能并不完美和/或干净，但请记住我已经这样做了一个星期。

Answer 1

You had made this section #landing__center position:absolute and top:0 that is why it was coming on top of navbar.您已经制作了此部分#landing__center position:absolute和top:0这就是它出现在导航栏顶部的原因。 I have increased the top to 30. Thanks我已将顶部增加到 30。谢谢

 * { margin: 0; padding: 0; } html { background-color: #808080; background-image: url("https://hdqwalls.com/download/simple-gray-abstract-background-wi-1920x1080.jpg"); background-repeat: no-repeat; } #landing__container { height: 100vh; width: 100%; } header { display: flex; justify-content: center; align-items: center; background-color: rgba(255, 0, 0, 0.4); } header h1 { color: white; font-family: impact; font-weight: normal; } header ul { display: flex; justify-content: flex-end; align-items: center; height: 30px; } header ul li { list-style: none; } header a { font-family: helvetica; font-weight: bold; font-size: 18px; text-decoration: none; color: white; margin: 30px; } #landing__center { display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; top: 30; /*changed*/ bottom: 0; left: 0; right: 0; position: absolute; } #landing__center h2 { padding-bottom: 20px; color: white; font-family: Impact; font-weight: normal; font-size: 40px; } #landing__center p { padding-top: 20px; color: white; font-family: helvetica; font-weight: normal; font-size: 20px; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Navigation Bar Practice</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="landing__container"> <!-- Navigation Bar --> <header> <nav id="nav__bar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Documentation</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <section id="landing__center"> <h2>Testing</h2> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem voluptatum asperiores illum maiores aliquid quo perferendis, blanditiis facere temporibus laudantium! </p> </section> </div> </body> </html>

Answer 2

You need to add z-index along with position: relative to your code您需要添加z-index和position: relative对于您的代码

header{
  z-index: 1;
  position: relative;
}

Answer 3

The problem is caused by the #landing__center covering the navigation bar, because it selected #landing__container as the element to be relative with该问题是由#landing__center覆盖导航栏引起的，因为它选择了#landing__container作为要与之相对的元素

One way is to create a wrapper that will act as the container of #landing__center , instead of #landing__container .一种方法是创建一个包装器，作为#landing__center的容器，而不是#landing__container 。 So that it is relative to its own container rather than its parent, not interfering with its siblings所以它是相对于它自己的容器而不是它的父容器，而不是干扰它的兄弟姐妹

 * { margin: 0; padding: 0; } html { background-color: #808080; background-image: url("https://hdqwalls.com/download/simple-gray-abstract-background-wi-1920x1080.jpg"); background-repeat: no-repeat; } #landing__container { height: 100vh; width: 100%; } header { display: flex; justify-content: center; align-items: center; background-color: rgba(255, 0, 0, 0.4); } header h1 { color: white; font-family: impact; font-weight: normal; } header ul { display: flex; justify-content: flex-end; align-items: center; height: 30px; } header ul li { list-style: none; } header a { font-family: helvetica; font-weight: bold; font-size: 18px; text-decoration: none; color: white; margin: 30px; } .wrapper { position: relative; height: 95%; } #landing__center { display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; top: 0; bottom: 0; left: 0; right: 0; position: absolute; } #landing__center h2 { padding-bottom: 20px; color: white; font-family: Impact; font-weight: normal; font-size: 40px; } #landing__center p { padding-top: 20px; color: white; font-family: helvetica; font-weight: normal; font-size: 20px; }

 <body> <div id="landing__container"> <!-- Navigation Bar --> <header> <nav id="nav__bar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Documentation</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <div class="wrapper"> <section id="landing__center"> <h2>Testing</h2> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem voluptatum asperiores illum maiores aliquid quo perferendis, blanditiis facere temporibus laudantium! </p> </section> </div> </div> </body>

HTML 导航栏链接不可点击

问题描述

3 个解决方案

解决方案1
2 2019-01-29 08:56:32

解决方案2
2 2019-01-29 08:56:34

解决方案3
1 已采纳 2019-01-29 09:11:49

HTML 导航栏链接不可点击

问题描述

3 个解决方案

解决方案1 2 2019-01-29 08:56:32

解决方案2 2 2019-01-29 08:56:34

解决方案3 1 已采纳 2019-01-29 09:11:49

解决方案1
2 2019-01-29 08:56:32

解决方案2
2 2019-01-29 08:56:34

解决方案3
1 已采纳 2019-01-29 09:11:49