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

Question

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

<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>如果单击外部任何元素（包括固定元素），如何关闭所有元素？

工作演示

Answer 1

z-index元素的问题，其大小大于背景的z-index。通过单击md-backdrop元素可以关闭菜单。md-backdrop.md-menu-backdrop有z-index等于99。

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。

要解决问题，请减小元素的z-index。就您而言，应小于99