奇怪的z-index问题，浮动列表项未显示在标题上方 [英] Weird z-index issue, floating list items not showing above heading
问题描述
这是我以前从未遇到过的z-index有趣的问题.让我继续回答您可能有的第一个想法:我已经为我拥有z索引的每个元素设置了所需的定位，不是那样.我尝试了尽可能多地重新排序，但是基本上我有两个固定的元素，一个是网站的标题文本，第二个是div，其中包含一个无序的导航项列表(每个导航项向左浮动并给出一个百分比)宽度).
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).
在我生命中，我无法确定为什么前两个导航项(首页"和关于")实际上没有完全悬停在鼠标上.好像它们的鼠标悬停功能已被其上方标题中的下降器所切断.
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.
我将创建问题的jsFiddle，实际上我确实试图指出我的问题，但是我为此使用了自定义字体，据我所知，这在jsFiddle中将不起作用.请记住，问题是跨浏览器的，而不是特定于IE的.抱歉，否则我帮不上什么忙，但我想Firebug是您的朋友.
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.
但是，我将发布此HTML/CSS代码，因为它可能比在Firebug中查看容易.
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!
推荐答案
由于#logo的z-index为4，而#nav的z-index为2，因此前两个项目被截断. ，#logo将高于#nav.
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.
#nav中的li后代的z-index为5没关系，因为这些元素位于不同的
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.
这篇关于奇怪的z-index问题，浮动列表项未显示在标题上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
