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>