Question

我在移动视图中的下拉菜单隐藏在我的横幅后面。我似乎无法修复它。我添加了z-index，我已经高达999但仍然没有区别。

这是HTML：

<li class="dropdown">
     <a class="dropdown-toggle provinces-btn" data-toggle="dropdown">Select Province<span class="caret"></span></a> 
     <ul class="dropdown-menu">
         <li><a href="#">Alberta</a></li>
         <li><a href="#">British Columbia</a></li>
         <li><a href="#">Manitoba</a></li>
         <li><a href="#">New Brunswick</a></li>
         <li><a href="#">Newfoundland and Labrador</a></li>
         <li><a href="#">Nova Scotia</a></li>
         <li><a href="#">Nunavut</a></li>
         <li><a href="#">Ontario</a></li>
         <li><a href="#">Prince Edward Island</a></li>
         <li><a href="#">Quebec</a></li>
         <li><a href="#">Saskatchewan</a></li>

     </ul>  
   </li>

这是CSS：

.dropdown-menu {
    left: 40% !important;
    margin-left: -30px;
   z-index: 50;
}


@media screen and (max-width: 768px) {
.provinces-btn {

    width: 100%;
    margin-top: 1px;
    border-radius: 12px;
    background-color: #3498db;
    border-color: rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    color: #FFF !important;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    padding: 10px 30px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.3);
    border-bottom-width: 3px;
    text-decoration: none;
    z-index: 60;



}

    .provinces-btn:hover, .provinces-btnActive {
        color: #FFEE00 !important;
        background: #1975D1;
        font-weight: 900;
    }

    .provinces-btn ul{
        margin: 0 auto;
    }

}

@media screen and (max-width: 604px) {
.provinces-btn {

    width: 100%;
    margin-top: 1px;
    margin-left: 15px;
    border-radius: 12px;
    background-color: #3498db;
    border-color: rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    color: #FFF !important;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    padding: 10px 30px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.3);
    border-bottom-width: 3px;
    text-decoration: none;
    z-index: 60;

   }

       .provinces-btn:hover, .provinces-btnActive {
        color: #FFEE00 !important;
        background: #1975D1;
        font-weight: 900;
    }
    .provinces-btn ul{
        margin: 0 auto;
    }

 }

其他带有z-index的CSS，我不确定它是否会影响它：

nav {
        padding: 0;
        position:relative;
        z-index:10;
        height: 0;
    }

    .showMenu {
        display: block;
        background: url() no-repeat center;
        background-size: 48px 48px;
        height: 80px;
        right: 0;
        top: 0;
        text-indent: -999999px;
        font-size: 0;
        position: absolute;
        z-index:11;
        border-left: 1px solid #DDDDDD;

    }

Answer 1

问题不是z-index问题，真正的问题是你的header，只是改变

header {
    width: 100%;
    height: auto;
    background: #FFFFFF;
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    margin-bottom: 2%;
}

要

header {
    width: 100%;
    height: auto;
    background: #FFFFFF;
    margin-bottom: 2%;
}

Answer 2

Z-Index仅适用于定位元素，请尝试将其添加到.dropdown-menu：

position: relative;

Answer 3

不要隐藏溢出。如果将其设置为“隐藏”，则将不允许您的新div（在溢出：隐藏的父元素内）弹出或与其他div重叠。

下拉菜单隐藏在div

3 个答案: