z-index problem2

私はドロップダウン・ナビゲーション・パネルを持っており、その下に文脈を持つdivがあります。前にドロップダウンしたリンクがコンテキストdivの背後にあるという問題がありました。私はz-indexを使ってその解決策を見つけました。パネルz-index 99とcontex div z-index -1を作成しました。z-index problem2

contex div内のすべてのリンクが非アクティブなので、ホバープロパティは機能しません。そこにあるはずのJS機能さえも非アクティブです。どうすれば修正できますか？ベストソリューションは、どういうわけか、Z-インデックスを使わずにドロップダウンパネルをコンテキストdivの上に表示することですが、どうすればよいでしょうか？

HTMLコード：

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

関連CSSコード：

.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

いくつかのコードを投稿してください。 –

これを追加してみてください：

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

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

これは、z屈折率スタックは、より高いレベルで開始を確認する必要がありますコンテンツよりもヘッダー、ヘッダー要素を上部に保持

出典

2012-03-31 14:33:57 lnrbob

z-index problem2

答えて

関連する問題