Question

这是一个简化的版本代码：左侧和右侧（中间锚点后面）的锚点不可点击。我尝试使用z-index将锚点放在前面并将分隔线留在后面，这样中间锚点仍然可以点击......我认为理解我的问题的最好方法就是做一个简单的例子.html文件并将其复制粘贴并尝试单击所有3个锚点（中间锚点有换行符，因此它看起来像很多锚点，但实际上只有1个）

JSFiddle链接代码：http://jsfiddle.net/a9C3R/1/

无论如何，这是代码：

<div style='position:fixed; top:0%; left:0%; height:100%; width:100%;'>
<div style='width:850px; margin-left:auto; margin-right:auto; border-left-style:solid; border-left-color:#333; border-left-width:thin; border-right-style:solid; border-right-color:#333; border-right-width:thin;padding-left:20px; padding-right:20px; padding-top:60px; padding-bottom:60px; height:100%; overflow:visible; background-color:#FFF;'>
<div>
<table width='100%' height='100%' style='width:100%; height:100%;'>
<td height='50%' width='120px' style='vertical-align:middle; height:50%; width:120px;'>
<div><a href=''>try to click me</a></div>
</td>
<td width='90%' style='vertical-align:middle; width:90%;'></td>
<td height='50%' width='120px' style='vertical-align:middle; height:50%; width:120px;'>
<div><a href=''>try to click me</a></div>
</td>
</table>
</div>
</div>
</div>

<div style='position:absolute; top:0%; left:0%; height:100%; width:100%;'>
<div style='width:610px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px; padding-top:60px; padding-bottom:60px; height:100%; overflow:visible;'>
<center>
<a href=''><font size="+1">try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br></font></a>
</center>
</div>
</div>

Answer 1

请在此处查看代码： http://jsfiddle.net/a9C3R/2/ 我已将z-index: 1;position: relative;添加到第二个div，并将style="position: relative;z-index: 1;"添加到<center>标记之后的锚点。

Answer 2

您的绝对<div>与您的固定<div>完全重叠，并且您无法使用z-index将固定<div>的孩子提升到绝对<div>之上，因为z-index不能那样工作。据我所知，您可以做的最好是为左右链接使用单独的固定<div>。

Answer 3

<div style='position:absolute; top:0%; left:0%; height:100%; width:100%;'>

这就是导致问题的原因。它覆盖了另外两个链接。无论如何你的html感很差。

分隔符后面的锚点不是可点击的CSS HTML

3 个答案: