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没有{{1}}或{{1}}

如果这没有意义，我理解。你可以从这个jsFiddle http://jsfiddle.net/EpgxK/1/得到一个更好的主意，并检查出来http://css-tricks.com/almanac/properties/z/z-index/。

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

Answer 2

position: fixed标题的z-index必须为0（或为负数）才能使徽标显示在其上方。我想你可能会遗漏一些样式来根据你给我们的东西来看这个问题。

http://jsfiddle.net/ExplosionPIlls/MaDe2/1/

Answer 3

我只是通过position:static代替position:relative解决了同样的问题。

在您的情况下，只需更改此课程。

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

谷歌Chrome和Z-Index错误

3 个答案: