выпадающее меню занимает новое место вместо относительной позиции

Question

Я использую выпадающий список начальной загрузки в navBar на значке меню (три точки)

, но проблема в мобильном устройстве, когда я открываю 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; и установите его верхний и левый столбцы относительно родительского div для dropdown-menu.Кроме того, добавьте z-index, чтобы отобразить его поверх других элементов (он устанавливает порядок в стеке).

При установке position: absolute; ваша позиция контейнера dropdown-menu устанавливается относительно его ближайшего предка.Убедитесь, что это родительский div, который dropdown, позиция relative (не установлена ​​в статический).