奇怪的z-index问题，浮动列表项不显示上面的标题(Weird z-index issue, fl

这是我与我以前从来没有遇到过的z指数有相当一个有趣的问题。让我继续前进，回答你的第一个想法，你可能有：我已经设置我需要为每个元素的定位我有一个z-index的，这并不是说。我试着尽可能的重新排序的东西，但基本上是我拥有的是两个固定的元素，一个是网站的标题文本，接下来就是一个div包含的导航项目的无序列表（每个向左浮动并且百分比宽度）。

这里的问题的位置（请确保您要查看的宽度比1000像素大）。

对于我的生活，我已经无法查明到底为什么前两个导航项（“家”和“关于”）实际上并不完全鼠标悬停。它好像他们的鼠标悬停功能是通过在它上面的标题下伸切断。

我会创造该问题的一个的jsfiddle，事实上，我做了尝试，并指出我的问题，但我使用这个自定义字体，据我所知不会在工作的jsfiddle。请记住，这个问题是跨浏览器，不是IE特有的。对不起，我没有太大的帮助，否则，但我猜Firebug是你的朋友。

不过，我将在此HTML / CSS代码，看到它可能会比观看萤火虫容易...

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 。

没关系，所述li内后代#nav具有z-index的5，因为这些元件在不同的堆栈上下文比#logo 。

你需要，因为你需要的橙色条以上您的标志重新考虑你已经设置了背景的方式，但是你需要在你的导航元素的标志。

Answer 2:

你并不需要z-index上#nav 。应用position: relative和z-index: 10 （任意的，任何指数> 4将工作）到ul中#nav 。

#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指数为4，则NAV一个是2，taht意味着该标志将位于上方的导航，只是改变了资产净值的Z-指数为4，标志的Z-指数2

希望这可以帮助