HTML 链接不可点击，似乎被覆盖

Question

我有一个非常简单的网站。它通过 php 扫描图片，然后一次显示一张，顶部有两个按钮。按钮用于在它们之间来回切换。在页面的最顶部有几个链接，但我无法单击它们。当我双击它们时，图片会突出显示，而不是光标上方的文本。我在没有 js 和 php 的情况下尝试过，问题仍然存在。

我对 HTML 不是很有经验。我认为这可能与 z-index 有关，但我无法修复它。

body {
  background-color: #FFFFFFf
}

.menup1 {
  float: left;
  padding-left: 5.5%;
  box-sizing: border-box;
  font-size: 35px;
  background: #fffff;
  color: black;
}

a {
  color: black;
  cursor: pointer;
}

p {
  color: black;
}

.listelemt {}

ul {
  float: left;
  font-size: 40px;
  padding-top: 10px;
}

ul li {
  padding-top: 15px;
}

.container {
  position: relative;
  width: 100%;
  padding-top: 200px;
}

.container .btnF {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(600%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}

.container .btnB {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-675%, -50%);
  -ms-transform: translate(105%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}

<div class="menup1"><a href="google.com">Vorspeise</a></div>
<div class="menup1"><a href="../../../Suppen">Suppen</a></div>
<div class="menup1"><a href="../../../Dessert">Dessert</a></div>
<div class="menup1"><a href="../../../Kuchen">Kuchen</a></div>
<div class="menup1"><a href="../../../Hauptgänge">Hauptgänge</a></div>
<div class="menup1"><a href="../../../Konditorei">Konditorei</a></div>
<div class="container">
  <img id="rezept" src="1.jpg" height=auto width=100%/>
  <button class="btnF" id="btnF">+</button>
  <button class="btnB" id="btnB">-</button>
</div>

我希望你能帮我解决这个问题。我可以设法解决所有涉及的 js 和 php 问题，但是不遵循编程规则的语言……不是我最好的部分。

Answer 1

链接上方有方框的原因是 float 未被清除。这意味着包含链接的框会折叠，这可能就是您需要添加这么多填充的原因。如果将 clear: both 添加到容器中，您将能够单击链接。

如果你想保持其他一切不变，我建议在菜单周围添加一个包装器并设置 position: relative，然后你可以给它一个更大的 z-index比容器。

position: absolute 的菜单按钮也需要更高的 z-index。

.menu {
  position: relative;
  z-index: 2;
}

.menup1 {
  float: left;
  padding-left: 5.5%;
  box-sizing: border-box;
  font-size: 35px;
  background: #fffff;
  color: black;
}

a {
  color: black;
  cursor: pointer;
}

p {
  color: black;
}

.listelemt {}

ul {
  float: left;
  font-size: 40px;
  padding-top: 10px;
}

ul li {
  padding-top: 15px;
}

.container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 200px;
}

.container .btnF {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(600%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}

.container .btnB {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-675%, -50%);
  -ms-transform: translate(105%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  border-radius: 1px;
  height: 50px;
  width: 50px;
}

  <div class="menu">
    <div class="menup1"><a href="google.com">Vorspeise</a></div>
    <div class="menup1"><a href="../../../Suppen">Suppen</a></div>
    <div class="menup1"><a href="../../../Dessert">Dessert</a></div>
    <div class="menup1"><a href="../../../Kuchen">Kuchen</a></div>
    <div class="menup1"><a href="../../../Hauptgänge">Hauptgänge</a></div>
    <div class="menup1"><a href="../../../Konditorei">Konditorei</a></div>
  </div>
  <div class="container">
    <img id="rezept" src="1.jpg" height=auto width=100%/>
    <button class="btnF" id="btnF">+</button>
    <button class="btnB" id="btnB">-</button>
  </div>