텍스트 링크가 스타일이 아니며 항상 클릭 가능하지는 않습니다.

Question

이 페이지 상단에 두 개의 링크가 있습니다 ("WORK"및 "ABOUT").

http://danux.me/

이 나는 ​​스타일로 그들을 얻을 수없는 이유를 모르겠어요. 플로트 만 적용 할 수있는 것처럼 보이고 CSS에서 아무것도하지 않습니다.

#nav_container { 

float: right; 
position: relative; 
padding-right: 110px; 
padding-top: 60px; 
} 




#nav_container li { 
float: left; 
display: inline; 
color: #fff; 
list-style: none; 
text-decoration: none; 
cursor: pointer; 
} 

클릭 할 수있는 부분까지, 브라우저를 확장하면 타일링 된 이미지의 오른쪽으로 이동하여 클릭 할 수 있습니다.

나는 중첩 효과에 대해 상대적으로 설정된 바둑판 식 이미지가 있고 파란색 막대는 절대로 설정되어 있습니다.

타일링 된 이미지의 z- 인덱스가 더 높습니다. 상위 링크를 클릭하고 클릭 할 수 있지만 주사위를 사용할 수 없다고 생각하면 해당 Z 링크 인덱스를 더 높게 적용 해 보았습니다.

추측 하시겠습니까?

Answer 1

문제는 사용자의 #home_console_wrapper 요소가 실제로 #color_beam과 겹치고이 동작을 숨기기 위해 padding-top이 큰 것입니다. 그것은 또한 더 높은 z-index를 가지고 있으며, 링크가 끊어지지 않도록 할 것입니다.

position: absolute을 #color_beam, padding-top: 190px을 #home_console_wrapper에서 제거해야합니다.

이렇게하면 디스플레이를 전혀 변경하지 않고도 링크를 클릭 할 수있게됩니다. 당신은 여전히 ​​약간의 '중복'효과를하려는 경우

은 단순히 #home_console_wrapper에 부정적인 margin-top 설정 :

#home_console_wrapper { 
    margin-top: -35px; 
} 

희망이 도움이! :)