导航栏透明问题

Question

我的透明栏与<div id="content">

有冲突

当position:relative;的{​​{1}}处于活动状态时，页面如下所示：

当#content的{​​{1}}缺少时，透明栏是okey

http://jsfiddle.net/t0p95q9c/

如何让我的内容相对位置透明？

Answer 1

指定position属性时，该元素受z-index属性的影响。

因此，请为导航指定一个较高的z-index值，将其放在每个其他定位元素的前面，例如：

{
    z-index: 100;
}

http://jsfiddle.net/t0p95q9c/1/

Answer 2

检查一下： http://jsfiddle.net/t0p95q9c/3/

#content {
    z-index: 1;
}
#navigation {
    z-index: 2;
}

我们的想法是使用一个更大的整数作为顶层的z-index。

Answer 3

你需要属性z-index：1到#navigation，正如LcSalazar所说

你还需要添加z-index：2到.MetroMenuBox，而不是无效的999px（px不是有效的）

#navigation {
    z-index:1;
    position: fixed;
    top: 0;
    width: 100%;
    color: #ffffff;
    height: 35px;
    text-align: center;
    padding-top: 15px;
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
    background-color: rgba(1, 1, 1, 0.8);
    color: rgba(1, 1, 1, 0.8);
}

.MetroMenuBox{
    position: fixed;
    background-color: #111111;
    padding-left: 5px;
    padding-right: 5px;
    z-index: 2;
}

http://jsfiddle.net/t0p95q9c/2/