<a> 标签在 CSS 类中使用固定定位时无法点击答案

【问题标题】：<a> tag unclickable when using fixed positioning in css class<a> 标签在 CSS 类中使用固定定位时无法点击
【发布时间】：2013-05-30 13:28:56
【问题描述】：

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

这是我的 css 类，并且：

<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>

这是我的 html 代码。在我的 css 类中使用 position:fixed 时，<a> 标签（站点地图）是不可点击的，就像它只是一个普通层一样。我看到了添加z-index:10; 一些对我不起作用的建议，我尝试将 z-index 更改为 0 和 101 并将位置更改为绝对，但也没有用。我该怎么办？

任何想法将不胜感激，在此先感谢。

【问题讨论】：

哪位 HTML 的 ID 为 #menu ？我在你的 HTML 中没有看到它？
我也没有看到 Divid 菜单。
对不起，我马上修改。
z-index 值为 0 正在从任何其他元素获取底层。这就是为什么标签会丢失它的焦点。尽可能增加 z-index 值。
我将它增加了 100000000000000000 但也没有用。

标签： html css tags

【解决方案1】：

这是您的代码的简化版本：

<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>

为了简单起见，我删除了所有内联样式（使用样式表，更简洁）。

CSS如下：

.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;
}

你这里有两个块元素，div.wrap和div#menu，第一个是静态位置，流入块，第二个是固定位置。

默认情况下，元素按照它们在 DOM 中出现的顺序堆叠，因此div#menu 堆叠在 div.wrap 之上，因此，您无法单击链接，因为它位于 div#menu 后面，这可能重叠div.wrap，除非你有足够大的窗口。

要解决此问题，请使用 z-index，它仅适用于非静态定位元素。在这种情况下，将position: relative 应用到div.wrap，然后设置z-index: 2，对于div#menu，设置z-index: 1，鼠标可以访问所有窗口宽度的“站点地图”链接。

小提琴：http://jsfiddle.net/audetwebdesign/Dg8YN/

参考

有关 z-index 的更多详细信息，请参阅http://www.w3.org/TR/CSS2/visuren.html#layers
和http://www.w3.org/TR/CSS2/zindex.html

【讨论】：