CSS - Link not clickable when using absolute position

Question

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.

Steric

Just tested, it is clickable! You need to provide more information concerning the remaining of your code! The problem doesn't come from what you have on your question! – Nopar

You should also include a list of brosers/os you have tested this on. It may be limited to a unique combination of these, especially given zuul's comment – Endeavor

jsfiddle.net/Wh2sK - Works for me. – Bohn

Okay this is weird because when I test it in a HTML file it works normally, but when I test it with VisualStudio (I'm working with ASP.NET) the problem occurs. I have no idea the reason though. – Steric

Answer 1

Try adding z-index:10; to .toplink{...} class. With z-index you are specifying the layering layout. It's something like this: element with z-index: x stays on the top of elements with z-index: (less than x) and behind the elements with z-index: (greater then x). Hope I've succeeded to make you understand.

Crowley

Answer 2

I have a button inside an absolutely positioned div and had this problem. z-index wasn't enough, I used pointer-events: all instead.

Marinate

What is pointer-events doing? – Peden