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

Question

我有一个非常简单的网站。它通过php扫描图片，然后一次显示一个，顶部有两个按钮。 botton用于在它们之间来回切换。 在页面的顶部，有几个链接，但是我无法单击它们。当我双击它们时，图片将突出显示，而不是光标在上方的文本。我已经尝试了没有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

在链接上显示框的原因是未清除浮动元素。这意味着包含链接的框会折叠，这可能就是为什么您需要添加大量填充的原因。如果将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>

Answer 2

问题不在于z-index，而是容器与菜单项重叠。要更正此问题，请将padding-top: 200px替换为margin-top: 200px，然后给容器float: left。另外，如果您不想在容器中添加任何“偏移”，则可以在容器上用clear: left对其进行初始化之前清除浮点数。

还要注意，您的body和.menup1的背景颜色都无效；指定十六进制代码时，您必须指定三个，四个或六个字母/数字。五个无效。

以下两项均已修复：

body {
  background-color: #ffffff;
}

.menup1 {
  float: left;
  padding-left: 5.5%;
  box-sizing: border-box;
  font-size: 35px;
  background: #ffffff;
  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;
  float: left;
  width: 100%;
  margin-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>