CSS - 使用绝对位置时链接不可点击答案

【问题标题】：CSS - Link not clickable when using absolute positionCSS - 使用绝对位置时链接不可点击
【发布时间】：2012-05-26 15:44:30
【问题描述】：

这是我的标题的 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 文件时出现。对不起，如果我听起来很复杂，但是是的，这个问题对我来说有点复杂。希望有人能指出我的原因。

【问题讨论】：

刚测试，可以点击！您需要提供有关其余代码的更多信息！问题不在于你的问题！
您还应该包括一个您已经测试过的兄弟/操作系统的列表。它可能仅限于这些的独特组合，尤其是考虑到 zuul 的评论
jsfiddle.net/Wh2sK - 适合我。
好吧，这很奇怪，因为当我在 HTML 文件中测试它时它可以正常工作，但是当我使用 VisualStudio（我正在使用 ASP.NET）测试它时，就会出现问题。我不知道原因。

标签： html css hyperlink position clickable

【解决方案1】：

尝试将z-index:10; 添加到.toplink{...} 类。

【讨论】：

使用z-index 指定分层布局。是这样的。带有z-index: x 的元素位于带有z-index: (less than x) 的元素的顶部和带有z-index: (greater then x) 的元素的后面。希望我能成功让你明白。
感谢您的解释！我希望你不介意我的愚蠢问题，但我仍然想知道在我为 toplink 类设置 z-index 值之前哪个元素停留在超链接的顶部？
是的，就是这样。它似乎默认进入后台，似乎

【解决方案2】：

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

【讨论】：