Z- 색인 문제 2

나는 아래쪽 탐색 패널이 있으며 그 아래에 컨텍스트가있는 div가 있습니다. 전에 드롭 다운 링크가 컨텍스트 div 뒤에 있다는 문제가있었습니다. Z- 인덱스를 사용하여 그 해결책을 찾았습니다. 패널 z-index 99와 contex div z-index -1을 만들었습니다.Z- 색인 문제 2

이제 문제는 contex div의 모든 링크가 비활성 상태이고 호버 속성이 작동하지 않는다는 것입니다. 거기에 있어야하는 JS 기능조차도 작동하지 않습니다. 어떻게 해결할 수 있습니까? 최선의 해결책은, 어떻게 든, Z- 인덱스를 사용하지 않고 컨텍스트 div 위에 드롭 다운 패널을 표시하는 것입니다. 어떻게?

HTML 코드 :

관련된 CSS 코드

<body> 
<?php include ("login_bar.php");?> 
    <div id="header"> 
     <div id="navbar" > 
      <nav class="dropdown"> 
       <?php include ("navbar.php");?> 
      </nav> 
     </div> 
     <div id="logo"> 

     </div> 
    </div> 
    <div id="wrapper1"> 
     <div id="wrapper3"> 
      <div id="picture">   
      </div> 
      <div id="selected_publications"> 

      </div> 
     </div> 
     <div id="wrapper2"> 
      dfgdg 

     </div> 
     <div id="wrapper4"> 
      <div id="welcome"> 
       <h3>welcome statement</h3> 
       Welcome to the NIBS. </br> some text here 

      </div> 
      <div id="tabs"> 
       <ul id="tabmenu" > 
        <li><a href="https://www.facebook.com/" >First Page</a></li> 
        <li><a href="#" >Second Page</a></li> 

        <li><a href="#" >Third Page</a></li> 
       </ul> 

       <div id="content"> dfdsgdfg</div> 
      </div> 
     </div> 

    </div>

.dropdown ul li:hover ul li a:hover 
    { 
    background:#666666; 
    color:#ffffff; 
    position:relative; 
    z-index:99; 
    } 

#wrapper1 
{ 
    border-left:2px solid black; 
    border-right:2px solid black; 
    margin-left:50px; 
    margin-right:50px; 
    min-width:80%; 
    min-height:500px; 
    background:white; 
    height:100% ; 
    z-index:-1; 
    position:relative; 
    height:100%;  
}

출처

2012-03-31 arthur

일부 코드는 게시 할 수 있도록 게시하십시오. –

시도이 첨가 :이 Z- 색인 스택을 보장한다

#wrapper1 { 
    position:relative; 
    z-index:1; 
} 

#header { 
    position:relative; 
    z-index:2; 
}

가 높은 레벨에서 시작 머리글 요소를 맨 위에 유지하면서 콘텐츠보다 머리글

출처

2012-03-31 14:33:57 lnrbob

Z- 색인 문제 2

답변

관련 문제