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>