導航欄透明問題

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。