如果在z-index的固定元素上點擊外部角度材質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>元素關閉，如果我點擊它以外的任何地方，包括固定的元素嗎？

WORKING DEMO

Answer 1

問題的元件，其是大於背景的z-index的z-index。點擊md-backdrop元素即可關閉菜單。 md-backdrop.md-menu-backdrop具有z-index等於99.

具有更大的堆疊順序的元素總是與下部堆疊順序的元素 的前面。

要解決問題，請減少元素的z-index。在你的情況下，它應該小於99