如何防止菜单在按钮下方以外的任何地方打开

Question

在平板电脑（显示为iPad Pro）上，如果我双击屏幕以放大页面，然后单击以打开菜单，则菜单会在搜索框下方打开，但应在标题下方打开，但应与登录用户。

预期的行为是，它将始终在登录用户偏移量下方，标题下方垂直位置打开。

html几乎如下所示。我正在使用flex将项目放置在标题中（例如徽标，搜索，用户），但这不会影响菜单。根据材料文档（v1.1.8）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> 包装了按钮，图标和名称，即使我还没有<div class="lds-css ng-scope"> <div style="width:100%;height:100%" class="lds-double-ring"> <div></div> <div></div> </div> <style type="text/css">@keyframes lds-double-ring { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes lds-double-ring { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes lds-double-ring_reverse { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes lds-double-ring_reverse { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } .lds-double-ring { position: relative; } .lds-double-ring div { position: absolute; width: 160px; height: 160px; top: 20px; left: 20px; border-radius: 50%; border: 8px solid #000; border-color: #3be8b0 transparent #3be8b0 transparent; -webkit-animation: lds-double-ring 1s linear infinite; animation: lds-double-ring 1s linear infinite; } .lds-double-ring div:nth-child(2) { width: 140px; height: 140px; top: 30px; left: 30px; border-color: transparent #1aafd0 transparent #1aafd0; -webkit-animation: lds-double-ring_reverse 1s linear infinite; animation: lds-double-ring_reverse 1s linear infinite; } .lds-double-ring { width: 200px !important; height: 200px !important; -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px); transform: translate(-100px, -100px) scale(1) translate(100px, 100px); } </style></div> 属性。

什么会导致平板电脑缩放而导致菜单在错误的位置打开？

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:shape="line"
    >

     <stroke
        android:color="#8a9299"
        android:width="1dp"
        />

</shape>

Answer 1

检查css属性是否设置相同。

使用position设置两个元素，并将z-index设置到打开下拉菜单重叠的两个元素。

示例：

（父元素）

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

（子元素）

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

再检查一次。这个答案是从CSS的角度来看的。