固定導航欄不與我網站的某些部分重疊

Question

我正在嘗試製作簡歷/ portofolio類型的網站。我遇到的唯一問題是，當我向下滾動時，我的固定導航欄不會與我的網站的某些內容（圖像和一些進度條）重疊。

這裏是我的CSS代碼：

body { 
padding-top: 70px; 
} 

#nav { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #333; 
position: fixed; 
top: 0; 
width: 100%; 

} 

#nav li { 
float: left; 
} 

#nav li a { 
display: block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
opacity:1; 
} 

#nav li a:hover:not(.active) { 
background-color: #111; 
} 

.active { 
    background-color: #007ed8; 
} 

#content{ 
margin-top:100px; 
padding:20px; 
} 

img{ 
width:290px; 
height:290px; 
} 

.margin{ 
    margin-top:100px; 
} 

.margin_bar{ 
    margin-top:6px; 
} 

a:hover{ 
text-decoration:none; 
} 

這裏有一個的jsfiddle並感謝您的幫助！ https://jsfiddle.net/6wzr6rtc/

Answer 1

就在z-index的屬性添加到一些足夠高的值的#nav只是要確保它始終停留在一切之上，是這樣的：

#nav { 
    z-index: 999999; 
} 

Answer 2

添加此css來導航欄用於重疊內容。

#nav { 
z-index: 9; 
} 

Answer 3

你只需要簡單地添加z-index到你的代碼。

#nav{ 
    z-index:9999 
}