Question

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

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

对于我的生活，我无法确定为什么前两个导航项目（“Home”和“About”）实际上并没有完全鼠标悬停。似乎他们的鼠标悬停功能被上方标题中的下降器切断了。

我会创建一个问题的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的{{1}}为4，而z-index的{{1}}为#nav。因此，z-index将高于#logo。

#nav中的li个后代的#nav为z-index并不重要，因为这些元素与#logo不同{。{}}。< / p>

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

Answer 2

您z-index上不需要#nav。将position: relative和z-index: 10（任意，任何索引＆gt; 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-index为4然后导航1为2，taht意味着徽标将位于 ABOVE 导航，只需将导航的z-index更改为4即可logo的z-index为2

希望这会有所帮助

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

3 个答案: