36

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.

huong
  • 4,534
  • 6
  • 33
  • 54
  • 3
    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! – Zuul May 19 '12 at 07:34
  • 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 – Steve Robillard May 19 '12 at 07:36
  • http://jsfiddle.net/Wh2sK/ - Works for me. – Madara's Ghost May 19 '12 at 07:37
  • 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. – huong May 19 '12 at 07:42

2 Answers2

102

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.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Krishanu Dey
  • 6,326
  • 7
  • 51
  • 69
8

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

Alican
  • 191
  • 2
  • 3