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文件。如果我听起来很复杂，那我很抱歉，但我觉得这个问题有点棘手。希望有人能指出问题的原因。

- huong

---

刚刚测试过了，它是可点击的！你需要提供有关代码剩余部分的更多信息！问题不是来自于你在问题中提供的内容！ - Zuul

你还应该包括一个你已经测试过的浏览器/操作系统列表。考虑到Zuul的评论，这个列表可能会受到限制，特别是针对独特的组合。 - Steve Robillard

http://jsfiddle.net/Wh2sK/ - 对我有效。 - Madara's Ghost

好的，这很奇怪，因为当我在HTML文件中测试它时，它正常工作，但是当我在VisualStudio中测试它（我正在使用ASP.NET），问题就出现了。虽然我不知道原因。 - huong

Answer 1

尝试在`.toplink{...}`类中添加`z-index:10;`。通过使用z-index，您可以指定层叠布局。它的工作原理是：具有z-index: x的元素位于具有z-index:（小于x）的元素之上，并位于具有z-index:（大于x）的元素之后。希望我已经成功地让您理解了这个概念。

- Krishanu Dey

---

使用 z-index 属性可以指定层叠布局。其作用类似于这样：具有 z-index: x 属性的元素会在 z-index 值小于 x 的元素之上，而在 z-index 值大于 x 的元素之下。希望我已经让您理解了。 - Krishanu Dey

谢谢您的解释！我希望您不介意我的愚蠢问题，但在我设置toplink类的z-index值之前，哪个元素保持在超链接的顶部仍然让我感到困惑？ - huong

是的，就是这样。它似乎默认在后台运行。 - Paceman

Answer 2

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

- Alican

---

pointer-events 是做什么的？ - BenKoshy