CSS - 使用绝对位置时链接不可单击

Question

这是我的标头的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>

这是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;
}

不知何故，登录链接不可单击，但是当我删除绝对位置时，它正常工作。有没有办法让链接工作，同时仍然保持位置？任何建议不胜感激，提前感谢。

-编辑-事实证明，问题出在别的地方。实际上我正在使用母版页，并且使用它创建了一个默认的ASP页。仅当我测试该 ASP 页而不是用于创建母版页的 HTML 文件时，才会出现此问题。对不起，如果我听起来很复杂，但是是的，问题对我来说有点复杂。希望有人能为我指出原因。

Answer 1

尝试将z-index:10;添加到.toplink{...}类中。使用 z 索引可以指定分层布局。它是这样的：带有 z-index： x 的元素位于具有 z-index： 的元素的顶部(小于 x(，在具有 z-index： 的元素后面：(大于 x(。希望我成功地让你明白。

Answer 2

我在绝对定位的div 内有一个按钮，遇到了这个问题。 z-index还不够，我用pointer-events: all代替。