Question

#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类中使用<a>时，position:fixed标记（站点地图）无法点击，就好像它只是一个普通图层一样。我看到了添加z-index:10;一些不适合我的地方的建议，我尝试将z-index更改为0和101并将位置更改为绝对，但也没有用。我该怎么办？？

任何想法都将受到赞赏，提前谢谢。

Answer 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之后{ {1}}可能会重叠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

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

1 个答案: