如果在具有 z-index 的固定元素上单击外部，Angular Material md-menu 元素不会关闭答案

【问题标题】：Angular Material md-menu element does not close if clicked outside on a fixed element with z-index如果在具有 z-index 的固定元素上单击外部，Angular Material md-menu 元素不会关闭
【发布时间】：2016-04-26 07:12:30
【问题描述】：

我的文档中有一个基本的<md-menu> 元素。默认情况下，如果单击文档中的任何位置，它将自行关闭。虽然，如果我在带有z-index 的fixed 元素内单击，它不会关闭。

<div class="menu-demo-container" layout-align="center center" layout="column">
  <md-menu>
    <md-button class="md-primary md-raised" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
      Test
    </md-button>
    <md-menu-content width="4">
      <md-menu-item>
        <md-button>
          Menu Item
        </md-button>
      </md-menu-item>
    </md-menu-content>
  </md-menu>
</div>

<div style="position:fixed; z-index: 100; backgorund-color:red;left:0;top:0;bottom:0">
  Try clicking here while the the md-menu is open
</div>

如果我单击其外部的任何位置（包括固定元素），如何关闭所有 <md-menu> 元素？

WORKING DEMO

【问题讨论】：

标签： javascript angularjs angularjs-material

【解决方案1】：

元素的z-index 存在问题，它大于背景的z-index。单击md-backdrop 元素可以关闭菜单。 md-backdrop.md-menu-backdrop 的 z-index 等于 99。

堆栈顺序较大的元素总是在元素前面堆栈顺序较低。

要解决问题，请减少元素的 z-index。在你的情况下，它应该小于99

【讨论】：

也不要忘记移动.md-scroll-mask！ 否则用户可以在您的菜单打开时与页面进行交互。