CSS-使用绝对位置时，链接不可单击 [英] CSS - Link not clickable when using absolute position

问题描述

这是我标头的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">登录</a></div>< div class ="search">< form class ="searchform" runat ="server" method ="get"><输入type ="text" id ="s" name ="s" value =搜索照片" onFocus ="this.value =''" onBlur ="this.value ='搜索照片'"/></form></div></div> 

这是CSS脚本:

  .logo {填充:30px 0;}.logo img {显示:内联；}.toplink {位置:绝对；底部:40px；右:280px；font-size:14px;}.搜索 {位置:绝对；底部:10px；正确:0；font-size:14px;宽度:330像素；} 

以某种方式无法点击登录链接，但是当我删除绝对位置时，它可以正常工作.无论如何，可以在保持位置的同时使链接正常工作?任何建议表示赞赏，并在此先感谢.

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

解决方案

尝试将 z-index:10; 添加到 .toplink {...} 类中./p>

Here is the HTML script of my header:

<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:

.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 in link 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.

解决方案

Try adding z-index:10; to .toplink{...} class.

这篇关于CSS-使用绝对位置时，链接不可单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！