导航栏透明问题

Question

我这有<div id="content">

冲突当#contentposition:relative;是活动的页面透明条，看起来是这样的：

当#contentposition:relative;缺少透明条是okey

http://jsfiddle.net/t0p95q9c/

如何使我的内容的相对位置是透明的吧？

Answer 1

你需要财产的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/

Answer 2

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

所以，给导航高z-index值，将其放置在所有其他定位的元素的前面，如：

{ 
    z-index: 100; 
} 

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

Answer 3

检查了这一点： http://jsfiddle.net/t0p95q9c/3/

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

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