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

Question

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。请帮我。感谢您的帮助。

谢谢

Answer 1

如果没有所有代码堆栈，我无法确定，但是您能否检查一下这个问题不是由 overflow: hidden 到您的容器中引起的？

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