html - 在 CSS 类中使用固定定位时标签不可点击

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可能会重叠div.wrap，除非您有足够大的窗口。

要解决此问题，请使用z-index，它仅适用于非静态定位元素。在这种情况下，apply position: relativetodiv.wrap然后 setz-index: 2和 for div#menu， setz-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