奇怪的 z-index 问题，浮动列表项未显示在标题上方

Question

这是我以前从未遇到过的 z-index 的一个非常有趣的问题。让我继续回答你可能有的第一个想法：我已经为每个有 z-index 的元素设置了我需要的定位，不是那样的。我已经尝试尽可能多地重新排序，但基本上我有两个固定元素，一个是网站的标题文本，下一个是 div 包含导航项的无序列表（每个都向左浮动并给出一个百分比宽度）。

Here's the location of the problem (make sure you're viewing at a width larger than 1000px).

在我的一生中，我一直无法确定为什么前两个导航项（“主页”和“关于”）实际上没有完全悬停鼠标。似乎它们的鼠标悬停功能被其上方标题中的下降器切断了。

我会为这个问题创建一个 jsFiddle，事实上我确实试图指出我的问题，但我为此使用了自定义字体，据我所知，这在 jsFiddle 中不起作用。请记住，问题是跨浏览器的，而不是特定于 IE 的。抱歉，否则我帮不上什么忙，但我猜 Firebug 是你的朋友。

不过，我将发布此 HTML/CSS 代码，因为它可能比在 Firebug 中查看更容易...

HTML：

<div id="header">
    <h1 id="logo"><a href="#">Page Title</a></h1>
    <h2 id="tagline"><a href="#">Here's a tagline</a></h2>
    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Resume</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

CSS：

#logo, #tagline { font-weight: normal; font-family: 'Pacifico', cursive; font-size: 60px; display: inline; margin-right: 20px; position: relative; z-index: 4; }
#logo a, #tagline a { color: #FFF; text-shadow: 2px 2px 0px #f7be82; -webkit-text-shadow: 2px 2px 0px #f7be82; -moz-text-shadow: 2px 2px 0px #f7be82; -o-text-shadow: 2px 2px 0px #f7be82; }
#logo a:hover, #tagline a:hover { color: #FFF; }
#tagline { font-size: 18px; }
#tagline a { text-shadow: 1px 1px 0px #f7be82; -webkit-text-shadow: 1px 1px 0px #f7be82; -moz-text-shadow: 1px 1px 0px #f7be82; -o-text-shadow: 1px 1px 0px #f7be82; }

.pageTitle { text-align: center; font-size: 48px; }

#header {
    position: fixed;
    z-index: 3;
    width: 960px;
    background: #9cddc8;
}

#nav {
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 50px;
    top: 81px;
    left: 0px;
    background: #f7be82;
    border-bottom: 2px solid #efb87e;
}

#nav ul { width: 900px; display: block; margin: 0 auto; overflow: hidden; }

#nav ul li {
    position: relative;
    z-index: 5;
    float: left;
    line-height: 50px;
    width: 16.66%;
    line-height: 45px;
    text-align: center;
}

#nav ul li a {
    font-family: 'Pacifico', cursive;
    font-size: 24px;
    color: #FFF;
    text-shadow: 1px 1px 0px #9cddc8; -webkit-text-shadow: 1px 1px 0px #9cddc8; -moz-text-shadow: 1px 1px 0px #9cddc8; -o-text-shadow: 1px 1px 0px #9cddc8;
}

感谢您对此问题的任何帮助，谢谢！

Answer 1

前两项被截断，因为#logo 的z-index 为4，#nav 的z-index 为2。因此，#logo 将高于#nav。

#nav 中的 li 后代的 z-index 为 5 并不重要，因为这些元素与 #logo 位于不同的 stack context 中。

您需要重新考虑设置背景的方式，因为您需要在橙色条上方的徽标，但您需要在导航元素下方的徽标.

Answer 2

您不需要 #nav 上的 z-index。将position: relative 和z-index: 10（任意，任何索引> 4 都可以）应用到#nav 中的ul。

#nav {
    position: fixed;
    width: 100%;
    height: 50px;
    top: 81px;
    left: 0px;
    background: #F7BE82;
    border-bottom: 2px solid #EFB87E;
}

#nav ul {
    width: 900px;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

这将使您的徽标保持在橙色条纹上方，并将您的菜单项放置在您的徽标“上方”，从而使悬停正常工作。

Answer 3

#logo, #tagline { font-weight: normal; font-family: 'Pacifico', cursive; font-size: 60px; display: inline; margin-right: 20px; position: relative; <h1>z-index: 4</h1>; }

....
....
....


#nav {
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 50px;
    top: 81px;
    left: 0px;
    background: #f7be82;
    border-bottom: 2px solid #efb87e;
}

...
...
...

你将标志的z-index设置为4，然后导航为2，这意味着标志将位于导航上方，只需将导航的z-index更改为4，然后徽标的 z-index 为 2

希望对你有帮助