1

我一直在玩一个响应式网站，当所有菜单和徽标在 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;
}
4

3 回答 3

5

不确定这是否应该被称为“错误”本身......这只是浏览器处理父/子元素与z-index属性之间关系的方式。

问题是是元素#menu的兄弟，而不是. 不管你把它放多高，它都不会在前面，因为它的父级（）总是在后面。.container.logoz-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。

于 2013-10-16T18:06:40.880 回答
0

标position: fixed头的 z-index 必须为 0（或负数），徽标才能显示在其上方。不过，我认为根据您提供给我们的内容，您可能会遗漏一些样式来查看此问题。

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

于 2013-10-16T17:45:14.287 回答
0

我有一个同样的问题，我只是通过给予position:static来解决position:relative。

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

`
.logo {
    position: static;
    height: 120px;
    width: 153;
    top: 20px;
    left: 0px;
    z-index: 3500;
}`
于 2016-06-22T08:23:49.437 回答