下拉元素隐藏!!! z-index问题

时间:2016-02-03 16:35:24

标签: css html5 css3 twitter-bootstrap-3 z-index

enter image description here

HTML

<div ng-controller="LangCtrl" class="dropdown dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="true" style="cursor:pointer;"> 
   {{'COMMON.CHOOSE_LANG' | translate}} 
   <span class="caret"></span>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li ng-repeat="lang in langs" ng-click="changeLanguage(lang.key)" id="lang_{{lang.key}}"><a href="">{{lang.name}}</a></li>
        </ul>
</div>

CSS

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 12px;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #cbcbcb;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

我尝试更改下拉菜单的z-index值,但没有解决问题。我不知道问题出在哪里。下拉列表中有四种语言,但有两种语言被隐藏。

我已经附上了CSS和HTML。请帮我。 任何帮助表示赞赏。

由于

1 个答案:

答案 0 :(得分:1)

如果没有所有代码堆栈,我无法确定,但请您检查此问题是否由overflow: hidden导致您的容器造成?

另请注意,只有定位元素会受到z-index堆栈的影响。