1

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

这是问题的位置（确保您以大于 1000 像素的宽度查看）。

在我的一生中，我一直无法确定为什么前两个导航项（“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;
}

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

4

3 回答 3

3

前两项被截断，因为#logoaz-index为 4 且#navaz-index为 2。因此，#logo将在 上方#nav。

li其后代的#nava为 5并不重要，z-index因为这些元素位于与 不同的堆栈上下文中#logo。

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

于 2012-05-05T01:51:49.920 回答
2

你不需要z-indexon #nav。将position: relativeand z-index: 10（任意，任何 > 4 的索引都可以）应用于ulin #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;
}

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

于 2012-05-05T01:55:17.720 回答
0 
#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表示徽标将位于导航上方，只需将导航的 z-index 更改为 4 并将徽标的 z-index 更改为 2

希望这可以帮助

于 2012-05-05T01:56:26.730 回答