Weird z-index issue, floating list items not showing above heading

问题

This is quite an interesting issue I'm having with z-indexes that I've never encountered before. Let me go ahead and answer one of your first thoughts you might be having: I've already set the positioning I need for each element I have a z-index on, it's not that. I've tried reordering things as much as possible, but basically what I have is two fixed elements, one is the website's heading text, the next is a div containing an unordered list of navigation items (each floated left and given a percentage width).

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

For the life of me, I've not been able to pinpoint why exactly the first two navigation items ("Home" and "About") actually don't mouseover entirely. It seems as though their mouseover functionality is cut off by the descender in the heading above it.

I would create a jsFiddle of the issue, and in fact I did to try and point out my problem, but I am using a custom font for this, which to my knowledge wouldn't work in jsFiddle. Keep in mind, the issue is cross-browser, not IE-specific. Sorry I'm not much help otherwise, but I guess Firebug is your friend.

I will post this HTML/CSS code however, seeing as it might be easier than viewing in 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;
}

I appreciate any help on the issue, thanks!

回答1:

The first two items are being cut-off because #logo has a z-index of 4 and #nav has a z-index of 2. Therefore, #logo will be above #nav.

It does not matter that the li descendants within #nav have a z-index of 5 as these elements are in a different stack context than #logo.

You will need to rethink the way you've set up your backgrounds since you need your logo above the orange bar, yet you need the logo under your nav elements.

回答2:

You don't need the z-index on #nav. Apply position: relative and z-index: 10 (arbitrary, any index > 4 will work) to the ul in #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;
}

This will keep your logo above the orange stripe and place your menu items "over" your logo, thereby allowing the hover to work properly.

回答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;
}

...
...
...

you make the z-index of the logo is 4 then the nav one is 2, taht means that the logo will located ABOVE the nav, just change the nav's z-index to 4 and the logo's z-index to 2

hope this helps

来源：https://stackoverflow.com/questions/10458090/weird-z-index-issue-floating-list-items-not-showing-above-heading

标签

html

css

positioning

z-index