谷歌Chrome和Z-Index错误

Question

我一直在玩一个响应式网站,当所有菜单和徽标在Coda中运行良好时,滑动到位,我在Chrome中尝试了网站,徽标似乎隐藏在标题后面 - 任何帮助都感激不尽!

HTML

<div id="menu">
   <div class="menu">
      <ul>
         <li><a href="#">Prices</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
         <li class="contact"><span>&#9990;</span><a href="#"> 0783 448 5449</a></li>
      </ul>
   </div>
</div>
<div class="container">
<div class="sixteen columns">
   <div id="track">
      <div class="logo"><img src="images/logo-120.png"></div>
   </div>
</div>

CSS:

#menu {
    position: fixed;
    top: 50px;
    height: 50px;
    background-color: rgba(255,255,255,0.9);
    width: 100%;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    text-align: center;
    z-index: 3000;
}

.menu ul li {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
    text-align: center;
    vertical-align: middle;
    padding: 2px 4px 2px 4px;
    background-color: #fff;
    font-size: 130%;
}

#track {
    position: fixed;
    top: 1px;
}

.logo {
    position: relative;
    height: 120px;
    width: 153;
    top: 20px;
    left: 0px;
    z-index: 3500;
}

Answer 1

不确定这应该被称为"bug"本身....它只是浏览器处理父/子元素和z-index属性之间关系的方式.

问题是元素#menu的兄弟.container,而不是.logo.无论你把它z-index放在.logo它上面有多高都不会放在前面,#menu因为它.logo的父母(.container)总会在#menu......之后.

.container没有position或z-index

如果这没有意义,我理解.您可以从这个jsFiddle http://jsfiddle.net/EpgxK/1/获得更好的想法,并查看http://css-tricks.com/almanac/properties/z/z-index/.

哦,如果您希望菜单以较小的屏幕尺寸显示在徽标前面,您可能需要重新编码html.