html - 下拉菜单占用新空间而不是相对位置

Question

我正在使用 bootstrap dropdown在菜单上的导航栏中(三个点)图标

但问题出在移动设备上，当我打开 navBar 并单击菜单按钮时，菜单下拉菜单会出现，但它占用空间而不是显示在内容之上。如图

这是html代码

<div class="dropdown" style="display: inline-block">
    <img src="{{environment.assets_base_url}}assets/images/menu.png" id="menuid" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="menuid">
        <a *ngIf="environment.enable_settigs" class="dropdown-item" href="{{settings_link}}">Settings</a>
        <!--<a class="dropdown-item" href="{{upgrade_link}}">Payment</a>-->
        <a class="dropdown-item" (click)="myLogout()">Logout</a>
    </div>
</div>

Answer 1

添加 position: absolute; 并将其设置为相对于 dropdown-menu 父 div 的顶部和左侧。此外，添加 z-index 以将其显示在其他元素的顶部(它设置堆栈顺序)。

通过设置 position: absolute; 您的 dropdown-menu 容器位置是相对于其最近定位的祖先设置的。确保它是 dropdown 位置的父 div 是 relative(未设置为静态)。