下拉菜单占据新空间而不是相对位置

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容器位置是相对于其最接近的祖先位置进行设置的。确保您的父div在dropdown位置是relative（未设置为static）。