헤더의 항목이 작동하지 않습니다.

Question

이상한 문제가 있습니다. 이미지 배경이있는 헤더가 있습니다. 이미지에 불투명도를 추가하고 헤더 앞에 다른 div (#main)를 작성하여 제공했습니다. 동일한 너비와 높이뿐만 아니라 절대 위치도 물론 배경 : 불투명도 추가에 대한 책임이있는 rgba (0,0,0,0.2). 문제는 여기에 .. 헤더가 지금 트릭을 적용한 후, 이러한 탐색 항목을 클릭하지 둘 공중 선회 할 수없는 탐색 모음을 포함하고 있지만, 인 CSS 코드 :

#main { 
     height: 540px; 
     width:100%; 
     background: rgba(0,0,0,0.2); 
     position:absolute; 
    } 
    header{ 
     margin:0; 
     padding: 10px 0px 10px 10px; 
     height: 540px; 
     width:auto; 
     background: url('../img/cover.png') center center; 
     background-size: cover; 
     color:white; 
    } 

Answer 1

시도에 z-index를 추가하여 네비게이션 링크

nav { 
    z-index:2; 
    position:relative; 
} 

Fiddle example