CSS - Link not clickable when using absolute position
clickable, css, html, hyperlink, position
Solution
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.
Problem
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.