HTML 链接无法点击

Question

由于某种原因无法点击我网站上“导航栏”上的链接，我似乎找不到原因。它在视口(viewport)中(这是网站的链接:https://codetheworld.000webhostapp.com/。网站上的链接应该是“学习编码”按钮)。一件有趣的事情是，一旦我打开检查元素窗口，它就会起作用。这是导航栏的代码片段:

#first {
  margin-top: 500px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  top: -1150px;
  left: 100px;
  z-index: 4;
}

li a {
  width: 200px;
  height: 50px;
  font-size: 2em;
  text-decoration: none;
  color: white;
  font-family: Georgia, serif;
  padding: 10px;
  border: 2px solid white;
  border-radius: 7px;
  text-align: center;
  line-height: 30px;
}

li a:hover {
  background-color: grey;
  color: white;
  text-decoration: none;
}

<ul id="first">
  <li><a href="tutorial.html">Learn to code</a></li>
</ul>

Answer 1

您将元素放置在视口(viewport)之外，因此无法点击它。 删除 margin-top 和 top 定位，一切都会起作用:

#first {
    background: black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  left: 100px;
  z-index: 4;
}

li a {
  width: 200px;
  height: 50px;
  font-size: 2em;
  text-decoration: none;
  color: white;
  font-family: Georgia, serif;
  padding: 10px;
  border: 2px solid white;
  border-radius: 7px;
  text-align: center;
  line-height: 30px;
}

li a:hover {
  background-color: grey;
  color: white;
  text-decoration: none;
}

<ul id="first">
  <li><a href="tutorial.html">Learn to code</a></li>
</ul>