iron-fit-behavior conflicts with app-header-layout

[andrey-git]

Description

iron-fit-behavior conflicts with app-header-layout

iron-fit-behavior assumes that the dropdown will be displayed on top of everything since it sets z-index: 103.
However app-header-layout sets the "header" as z-index 1 and "content" as z-index 0. So the resulting z-index of the dropdown inside the content is 0:103 which is less than 1:0, so the header hides the dropdown.

Expected outcome

Either:

• The dropdown is on top of everything, including the app-header
• The dropdown is located inside the content and not behind header.

Actual outcome

The dropdown is located with position: fixed;top:0 and is hidden behind app-header.

Live Demo

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

Steps to reproduce

Put paper-dropdown-menu inside app-header-layout

Browsers Affected

• Chrome
• Firefox
  Didn't check others