如何在所有内容之上显示 Bootstrap 下拉菜单？

Question

我有这个问题：

（对不起希腊语）。

我想要这个下拉菜单，位于页面上所有其他内容的顶部。 我不认为我可以使用 position:fixed，因为我希望下拉菜单始终位于其上方的蓝色按钮下方。

这是 html（我正在使用引导程序）：

https://jsfiddle.net/9pLg1kLy/2/

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="navbar-default sidebar" role="navigation">
    <div id="navbar-root-div" class="sidebar-nav navbar-collapse in">
        <ul class="nav" id="side-menu">
            <!--<sidebar-search></sidebar-search>-->
            <li ng-show=currentUser ui-sref-active="active"> <a ui-sref="dashboard.map"><i class="fa fa-map fa-fw"></i> Χάρτης</a>

                <!-- </li>
            <li ng-show=currentUser ui-sref-active="active">
                <a ui-sref="dashboard.chart"><i class="fa fa-line-chart fa-fw"></i>&nbsp;Δείκτες Απόδοσης</a>
            </li>-->
                <li id="deleteDevicePathsID" ng-show="devicePaths.p1" ui-sref-active="active"> <a href="" ng-click='deletePaths()'><i class="fa fa-trash-o fa-fw"></i> Διαγραφή Διαδρομών</a>

                </li>
                <li ng-class="{active: collapseVar==1}" ng-cloak ng-show="devicesLoaded && currentUser">{{dropDown}} <a href="" ng-click="check(1)"><i class="fa fa-car fa-fw"></i> Συσκευές<span ng-show=DevicesArray
                                                                                             class="fa arrow"></span></a>

                    <ul id="deviceDataList" class="nav nav-second-level" collapse="collapseVar!=1">
                        <li ng-show=devicesLoaded class="sidebar-search">
                            <div class="input-group custom-search-form">
                                <input type="text" class="form-control" ng-model="searchText" placeholder="Αναζήτηση..."> <span class="input-group-btn">
                                <!--<button class="btn btn-primary dropdown" type="button"></button> -->
                                <div class="dropdown">
                                    <a id="toolsDrop" href="" role="button"
                                       class="dropdown-toggle btn btn-primary"
                                       data-toggle="dropdown"
                                       style="padding: 6px 6px 6px 8px;">Φίλτρα&nbsp;&nbsp;&nbsp;<b
                                            class="caret"></b></a>
                                    <ul class="dropdown-menu" style="min-width: 0; top: 34px; left: -20px;">
                                        <li>
                                            <a href="" style="padding: 6px; min-width: 0"
                                               ng-click="statusFilter = movingFilter"> <img
                                                    src="misc/images/pinOntheMove.png">&nbsp;Κινείται</a>
                                        </li>
                                        <li><a href="" style="padding: 6px;min-width: 0"
                                               ng-click="statusFilter = stoppedFilter"> <img
                                                src="misc/images/pinStopped.png">&nbsp;Σε Στάση</a>
                                        </li>
                                        <li><a href="" style="padding: 6px;min-width: 0"
                                               ng-click="statusFilter = unknownFilter"> <img
                                                src="misc/images/pinUnknown.png">&nbsp;Άγνωστο</a>
                                        </li>
                                        <li class="divider hidden-xs"></li>
                                        <li><a href="" style="padding: 6px;min-width: 0"
                                               ng-click="statusFilter = allFilter"> <i class="fa fa-th-list"></i>&nbsp;Όλα</a>
                                        </li>
                                    </ul>
                                </div>
                                </span>

                            </div>
                        </li>
                        <li>
                            <ul class="nav nav-second-level sidebar-device-list">
                                <li ng-init="third=!third" ng-class="{active: multiCollapseVar==3}" ng-repeat="device in DevicesArray | filter:dataFilter | filter:searchText | filter: statusFilter" id="{{device.DeviceId}}" lat="{{device.DeviceData.Position.Y}}" lng="{{device.DeviceData.Position.X}}" ui-sref-active="active"> <a style="font-weight:bold; border-style: none none solid none;" href="" ng-click="CenterMapOnPosition(device.DeviceData.Position, device.DeviceData.DeviceId)"><img
                                        width="26"
                                        height="26"
                                        ng-src="misc/images/pin{{device.DeviceData.State}}.png">
                                    {{device.Name}} <p style="font-weight: normal; color: #002a80">{{device.DeviceData.Location}}</p></a>

                                </li>
                            </ul>
                        </li>
                    </ul>
                    <li ng-show="devicesLoaded && currentUser" ui-sref-active="active"> <a href="" ng-click='togglePlates()'><i ng-show="labelsShown" class="fa fa-check-square-o fa-fw"></i><i ng-hide="labelsShown" class="fa fa-square-o fa-fw"></i>&nbsp;Ονόματα Οχημάτων</a>

                    </li>
                    <li ng-show=currentUser ui-sref-active="active"> <a href="" ng-click='logout()'><i class="fa fa-sign-out fa-fw"></i>&nbsp;Αποσύνδεση</a>

                    </li>
        </ul>
    </div>
</div>

下拉菜单在第 32 行。

Answer 1

尝试使用 position:relative 添加 z-index 以使其可见

Answer 2

尝试在被截断的元素上添加 z-index。这会将元素带到前面