Elements with a positive z-index in the [main] content appear above the overlay.

[ccjmne]

Description

The #scrim overlay displayed in narrow layouts when the drawer is open does not properly cover the [main] element when some its content has a positive z-index.

Expected outcome

The overlay covers entirely the [main] content even if it hosts elements brought further to the front using the z-index property.

Actual outcome

The elements from the [main] content that have a positive z-index appear on top of the #scrim overlay.

Live Demo

https://jsbin.com/vasihiwovi/edit?html,css,output

Steps to reproduce

1. Put a paper-drawer-panel element in the page.
2. Add a main element in it. A plain div or a paper[-scroll]-header-panel would do.
3. Add in some content, with position: relative; z-index: 1; styling.
4. Ensure your layout is narrow enough to have the drawer collapsible.
5. Open the drawer.