search

PolymerElements / paper-drawer-panel

A Material Design two-section responsive panel
https://www.webcomponents.org/element/PolymerElements/paper-drawer-panel
25 stars 42 forks source link

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

Open ccjmne opened 7 years ago

ccjmne commented 7 years ago

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.