Polymer 使用应用程序抽屉布局和应用程序标题布局

我正在Polymer 1.0中创建一个新的webapp，它需要以下布局

• 加载时覆盖整个页面并压缩到小工具栏高度的标题面板
• 一个反应灵敏的抽屉面板，可在手机上滑动，并在大屏幕上保持不变

聚合物已经有了自己的网络组件，

应用程序标题面板

和

应用程序抽屉面板

我想直接的解决方案是将整个抽屉面板包含在标题面板中。在我把它们放在一个页面之前，它们工作得非常完美。在一起使用它们时，我面临一些布局问题

持久抽屉在

应用程序标题面板后面移动，而不是粘在标题面板的内容区域。（注意：应用程序标题布局的z指数高于应用程序抽屉面板）

如何解决此问题？
首先：清除所有试图更改应用布局中任何组件的z索引、位置或其他类似内容的css，否则会弄乱组件

这是我的样本：

<app-drawer-layout fullbleed
                   force-narrow>
    <!-- Drawer content -->
    <app-drawer id="appDrawer"
                swipe-open>
        <app-toolbar>Menu</app-toolbar>

        <!-- Some content -->
    </app-drawer>

    <!-- Main content -->
    <app-header-layout has-scrolling-region>

        <app-header fixed
                    effects="waterfall">
            <app-toolbar>
                <paper-icon-button icon="menu"
                                   drawer-toggle></paper-icon-button>
                <div title>My App</div>
            </app-toolbar>
        </app-header>

        <!-- Some content -->

    </app-header-layout>
</app-drawer-layout>


菜单
我的应用程序

不要忘记导入所有依赖项：

<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">

但这并不能帮助我在页眉下方找到一个粘糊糊的抽屉，它在滚动时从全屏缩小到工具栏(