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.

Answer 1

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