Как запретить открывать меню где-либо, кроме как под кнопкой

Question

На планшете (показан iPad Pro), если дважды щелкнуть экран для увеличения страницы, а затем нажать, чтобы открыть меню, меню откроется под окном поиска, но должно открыться под заголовком, но выровнено повошел в систему пользователя.

Ожидаемое поведение: он всегда будет открываться ниже смещения зарегистрированного пользователя вертикально под заголовком.

HTML выглядит примерно так:Я использую flex для размещения элементов в заголовке (например, логотип, поиск, пользователь), но это не должно влиять на меню.В соответствии с документацией по материалам (v1.1.8) By default, md-menu will attempt to align the md-menu-content by aligning designated child elements in both the trigger and the menu content.. Это означает, что меню будет соответствовать желаемому значению div, которое оборачивает кнопку, значки и имя, даже если у меня еще не было атрибута md-menu-origin.,

Что может привести к открытию меню в неправильном месте на увеличенном планшете?

<md-menu-bar>
<md-menu hide show-sm show-md md-offset="0 9">
    <div
        class="md-icon-button"
        ng-click="vm.openMenu($mdMenu, $event)"
        aria-label="Open portal menu"
        md-menu-origin
        md-menu-align-target
        role="button"
        aria-label="Portal menu"
    >
        <span class="fa fa-user-o"></span>
        <span class="user-name" ng-bind="vm.userName"></span>
        <span class="fa fa-caret-down" ng-if="!$mdMenuIsOpen"></span>
        <span class="fa fa-caret-up" ng-if="$mdMenuIsOpen"></span>
    </div>
    <md-menu-content layout="column" layout-align="start stretch" width="3">
       <span>Portal Menu</span>
       <md-menu-item>...</md-menu-item>
       <md-menu-item>...</md-menu-item>
       <md-menu-item>...</md-menu-item>
   </md-menu-content>
</md-menu>
</md-menu-bar>

Answer 1

Проверьте с тем же свойством css, установленным для того же самого.

Используйте position для двух элементов и установите z-index для двух элементов, для которых открывающийся раскрывающийся список перекрывается.

Пример:

(родительский элемент)

.class1 {
  position: relative;
  z-index: -1;
}

(дочерний элемент)

.class2 {
  position: absolute;
  z-index: 16;
}

Один раз проверьте с этим.Этот ответ с точки зрения CSS.