Html CSS - 使用绝对位置时链接不可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10663267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Link not clickable when using absolute position
提问by huong
Here is the HTML script of my header:
这是我的标题的 HTML 脚本：
<div class="header">
<div class="logo"><a href="Default.aspx"><img src="style/images/logo.png" alt="" /></a></div>
<div class="toplink"><a href="Signin.aspx">Sign in</a></div>
<div class="search">
<form class="searchform" runat="server" method="get">
<input type="text" id="s" name="s" value="Search for photos" onFocus="this.value=''" onBlur="this.value='Search for photos'"/>
</form>
</div>
</div>
And here is the CSS script:
这是 CSS 脚本：
.logo {
padding: 30px 0;
}
.logo img {
display: inline;
}
.toplink {
position: absolute;
bottom: 40px;
right: 280px;
font-size: 14px;
}
.search {
position: absolute;
bottom: 10px;
right: 0;
font-size: 14px;
width: 330px;
}
Somehow the Sign inlink isn't clickable, but when I remove the absolute position, it works normally. Is there anyway to make the link work while still keeping the position? Any suggestion is appreciated, and thanks in advance.
不知何故，登录链接不可点击，但是当我删除绝对位置时，它可以正常工作。有没有办法在保持位置的同时使链接工作？任何建议表示赞赏，并提前致谢。
-Edit- Turns out the problem lies somewhere else. Actually I'm using masterpage and I created a default ASP page using it. The problem only occurs when I test that ASP page, not the HTML file that I used to create the masterpage. Sorry if I sound complicated but yeah, the problem's sort of complicated to me. Hopefully someone can point out the reason for me.
- 编辑 - 原来问题出在其他地方。实际上，我正在使用母版页，并且使用它创建了一个默认的 ASP 页面。该问题仅在我测试该 ASP 页时出现，而不是我用来创建母版页的 HTML 文件。对不起，如果我听起来很复杂，但是是的，这个问题对我来说有点复杂。希望有人能帮我指出原因。
回答by Krishanu Dey
Try adding z-index:10;to .toplink{...}class.
尝试添加z-index:10;到.toplink{...}类。
回答by Alican
I have a button inside an absolutely positioned div and had this problem. z-indexwasn't enough, I used pointer-events: allinstead.
我在绝对定位的 div 中有一个按钮并且遇到了这个问题。z-index不够用，我用了pointer-events: all。
