Question

我有一个下拉导航面板，下面是带有上下文的div。在我遇到问题之前，droped down链接在上下文div后面。我找到了使用z-index的解决方案。面板z-index 99和contex div z-index -1。

现在的问题是，contex div中的所有链接都处于非活动状态，hover属性不起作用。即使是应该存在的JS函数也是不活动的。我该如何解决这个问题？我认为，最好的解决方案是，不管怎样，下拉面板会出现在上下文div之上而不使用z-index，但是如何？

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

Answer 1

尝试添加此内容：

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

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

这应该确保z-index堆栈的开头处于标题的更高级别而不是内容，从而将标题元素保持在顶部

z-index问题2

1 个答案: