固定ナビゲーションバーが私のウェブサイトの一部と重複していない

Question

私はresume/portofolioタイプのウェブサイトを作ろうとしています。私が持っている唯一の問題は、私の下にスクロールすると、私の固定ナビゲーションバーが私のウェブサイトのあるコンテンツ（画像といくつかのプログレスバー）と重なっていないことです。

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、あなたの助けに感謝だ：

は、ここに私のCSSコードです！ https://jsfiddle.net/6wzr6rtc/

Answer 1

ちょうどちょうどそれがいつものように、他のすべての上にとどまることを確認するために、いくつかの十分に高い値で#navへのz-indexプロパティを追加します。

#nav { 
    z-index: 999999; 
} 

Answer 2

は、ナビゲーションバーにこのCSSを追加します重複するコンテンツ

#nav { 
z-index: 9; 
} 

Answer 3

コードにZ-インデックスを追加するだけで済みます。

#nav{ 
    z-index:9999 
}