如果在固定元素上点击外部的角度材料md-menu元素不会关闭，并且有z-index。

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