z-index problem2

Ich habe eine Dropdown-Navigationsleiste und darunter ein div mit Kontext. Bevor ich ein Problem hatte, dass die Drop-Down-Links hinter dem Kontext div waren. Ich habe eine Lösung gefunden, die den Z-Index verwendet. Erstellt den Panel-Z-Index 99 und den Contex-Div-Z-Index -1.z-index problem2

Das Problem ist jetzt, dass alle Links innerhalb des Contex-Div inaktiv sind, die Hover-Eigenschaft nicht funktioniert. Sogar die JS-Funktionen, die da sein sollen, sind inaktiv. Wie behebe ich das? Beste Lösung, denke ich, wird sein, irgendwie zu machen, das Dropdown-Panel über Kontext div erscheinen ohne Verwendung von Z-Index, aber wie?

HTML-Code:

<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>

relevanten CSS-Code:

.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%;  
}

Quelle

2012-03-31 arthur

Geben Sie einen Code ein, damit wir einen Blick darauf werfen können. –

Versuchen Sie, diese Zugabe:

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

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

Dies sollte den Z-Index-Stack beginnt auf einem höheren Niveau gewährleisten zu die Kopfzeile als für den Inhalt, Header-Elemente auf

halten

Quelle

2012-03-31 14:33:57 lnrbob

Antwort

Verwandte Themen