HTML链接不可点击，看起来像是重叠的
HTML链接不可点击，看起来像是重叠的
提问于 2018-08-06 07:02:43
我有一个非常简单的网站。它通过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内容，但是不遵循编程规则的语言……不是我最好的部分。
回答 1
Stack Overflow用户
发布于 2018-08-06 07:14:43
你在链接上有一个框的原因是浮动没有被清除。这意味着包含链接的框会折叠，这可能就是您需要添加这么多填充的原因。如果您将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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51698868
复制相关文章
相似问题