<a> tag unclickable when using fixed positioning in css class

Problem

#menu {
    height: 265px;
    width: 1013p x;
    position:fixed;
    z-index:0;
    top: 15px;
    left: -37px;
}

This is my css class and:

<div style="float:right; height: 100px; margin-left: 0px;margin-right:0px; width: 352px;" > 
    <br />       
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a style=" text-decoration:none; color:White" href="#">Site Map</a>
    <div style="height: 26px;margin-top:10px">
        <asp:TextBox ID="TextBox1" runat="server" 
            style="Width:149px;margin-right:2px; margin-left: 30px;"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Search" Width="55px" />
    </div>   
</div>

<div id="menu"> 
    <ul>
        <li class="nav1" style="margin-left:50px;"><a href="" style="width:201px">&nbsp;&nbsp;Home</a></li>                  
        <li class="nav2" style="width:201px; height: 153px;margin-left: 0px;"><a href="" style="width:200px">Products</a></li> 
        <li class="nav3" style="width:200px; height: 153px;margin-left: 0px;"><a href="" style="width:200px">Contact Us</a></li>
        <li class="nav4" style="width:201px; height: 153px; margin-left: 0px;"><a href="" style="width:200px">About Us</a></li>
    </ul>
</div>

This is my html code.The <a> tag(Site Map) is unclickable when using position:fixed in my css class and acts as if it is just a normal layer. I saw the suggestion of adding z-index:10; some where which didn't work for me, I tried changing the z-index to 0 and 101 and changing the position to absolute, but didn't work either.what should I do?

Any ideas will be appreciated,thanks in advance.

Problem courtesy of: jal nami

Solution

Here is a simplified version of your code:

<div class="wrap">
    <a href="http://www.google.com">Site Map</a>
    <div>
       TextBox and Button from .asp tags...
    </div>
</div>

<div id="menu">
    <ul>
        <li class="nav1"><a href="http://yahoo.com">Home</a></li>
        <li class="nav2"><a href="">Products</a></li>
        <li class="nav3"><a href="">Contact Us</a></li>
        <li class="nav4"><a href="">About Us</a></li>
    </ul>
</div>

I removed all the inline styles (use style sheets, much cleaner) for simplicity.

The CSS is as follows:

.wrap {
    float:right; 
    height: 100px; 
    margin-left: 0px;
    margin-right:0px; 
    width: 352px;
    outline: 1px dotted blue;
    position: relative; /* need this for z-index to take effect */
    z-index: 2;
}

#menu {
    outline: 1px dotted blue;
    height: 265px;
    width: 1013px; /* Fix the typo for px (extra space) */
    position:fixed;
    z-index: 1;
    top: 0;
    left: 0;
}

What you have here are two block elements, div.wrap and div#menu, the first is a static position, in-flow block, and the second is fixed position.

By default, elements are stacked in the order they appear in the DOM, so div#menu is stacked over div.wrap, and for this reason, you can't click the link since it is behind div#menu which may overlap div.wrap unless you have a large enough window.

To fix this, use z-index, which works only for non-static positioned elements. In this case, apply position: relative to div.wrap and then set z-index: 2, and for div#menu, set z-index: 1 and the "Site Map" link will be accessible to the mouse for all window widths.

Fiddle: http://jsfiddle.net/audetwebdesign/Dg8YN/

Reference

For more details about z-index, see http://www.w3.org/TR/CSS2/visuren.html#layers
and http://www.w3.org/TR/CSS2/zindex.html

Solution courtesy of: Marc Audet

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.