分隔线后面的锚点是不可点击的 CSS HTML
这是一个简化的版本代码： 左侧和右侧的锚点（中间锚点后面）不可点击。我尝试使用 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>
Here is a simplified version code: The anchors on the left and right (behind the middle anchor) are not clickable. I tried using z-index to bring just the anchors in front and leave the divider in the back so that the middle anchor would still also be clickable... I think the best way to understand my problem would be to just make a quick example.html file and copy paste it in and try to click all 3 anchors (the middle anchor has line breaks so it looks like a lot of anchors but it's actually only 1)
JSFiddle link to code: http://jsfiddle.net/a9C3R/1/
Anyways, here is the code:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
请检查这里的代码：
http://jsfiddle.net/a9C3R/2/
我已将
z-index: 1;position:relative;添加到第二个 div 和style="position:relative;z-index: 1;"作为锚点，即位于标记之后。Please check the code here:
http://jsfiddle.net/a9C3R/2/
I have added
z-index: 1;position: relative;to the second div andstyle="position: relative;z-index: 1;"for anchor which is coming after<center>tag.您的绝对
与您的固定完全重叠，并且您不能使用 z-index 来引发固定<的子级。 div> 高于绝对因为 z-index 不是这样工作的。据我所知，您能做的最好的事情就是为左右链接使用单独的固定。Your absolute
<div>completely overlaps your fixed<div>, and you can't use z-index to raise a child of your fixed<div>above your absolute<div>because z-index doesn't work like that. As far as I can see, the best you can do is to use separate fixed<div>s for the left and right links.这就是造成问题的原因。它覆盖了其他两个链接。
无论如何，你的 html 感觉很差。
this is what is causing the problem. its overlaying the other two links.
anyways your html sense is poor.