페이드 이것은 JQuery와</p> <pre><code><script type="text/javascript"> $(document).ready(function() { $('#showhidetarget').hide(); $('a#showhidetrigger').click(function() { $('#showhidetarget').toggle(150); }); }); </script> </code></pre> <p>내 고정 헤더

Question

overlappes이 내 끈적 끈적한 헤더 탐색 CSS입니다

#nav { 
    background-color: #001f22; 
    height: 30px; 
    width: 100%; 
    position: fixed; 
    list-style-type: none; 
    margin-top: 0px; 
    margin-bottom: 0; 
    float: left; 
    margin-right: auto; 
    margin-left: auto; 

탐색 HTML을

<div id="nav"><ul> 
     <li><a href="#home">HOME</a></li> 
     <li><a href="#about">ABOUT</a></li> 
     <li><a href="#portfolio">PORTFOLIO</a></li> 
     <li><a href="#contact">CONTACT</a></li> 
    </ul> 
    </div> 

페이드 - 인 CSS

.fade { 
    opacity: 0.5; 
    transition: opacity .50s ease-in; 
    -moz-transition: opacity .50s ease-in; 
    -webkit-transition: opacity .50s ease-in; 
    } 

    .fade:hover { 
    opacity: 1; 
     } 

    .fade:visited { 
    opacity: 1; 

     } 

기본적으로, 내 페이드 인/페이드 아웃 jquery 이미지 OVERLAP /는 고정 된 탐색 표시 줄의 앞에 있습니다. 중복되지 않도록 어떻게 수정합니까?

Answer 1

NAV 막대에 z- 색인과 fadeIn 개체를 지정합니다.

예를 들어, NAV 막대의 z- 색인이 더 높은 지 확인하십시오.

.fade { 
    opacity: 0.5; 
    transition: opacity .50s ease-in; 
    -moz-transition: opacity .50s ease-in; 
    -webkit-transition: opacity .50s ease-in; 
    z-index: 10; 
    } 

#nav { 
    background-color: #001f22; 
    height: 30px; 
    width: 100%; 
    position: fixed; 
    list-style-type: none; 
    margin-top: 0px; 
    margin-bottom: 0; 
    float: left; 
    margin-right: auto; 
    margin-left: auto; 
    z-index: 20; 
} 

Answer 2

이제 CSS 속성 "z- 색인"에 대해 알려주십시오. z-index는 요소가 맨 위에 표시되도록 제어합니다. 더 큰 z- 인덱스를 가진 엘리먼트는 더 낮은 z- 인덱스를 가진 엘리먼트와 겹칠 것이다.

헤더의 z- 색인을 설정하십시오. ~ 999 :

#nav { 
    z-index: 999; 
} 

그리고 이미지의 z- 색인은 다음과 같습니다.

희망이 있습니다.