Angular Material md-menu element does not close if clicked outside on a fixed element with z-index

Question

I have a basic <md-menu> element within my document. On default, it will close itself if clicked anywhere within the document. Although, if I click inside a fixed element with a z-index, it will not close.

<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>

How can I get all my <md-menu> elements to close if I click anywhere outside of it, including on fixed elements?

WORKING DEMO

Answer 1

Problem with z-index of element, which is greater then backdrop's z-index. It's possible to close menu by click on md-backdrop element. md-backdrop.md-menu-backdrop has z-index equal to 99.

An element with greater stack order is always in front of an element with a lower stack order.

To resolve a problem, reduce z-index of element. In your case, it should be less than 99