使用应用程序抽屉布局与应用程序标题布局

Question

我正在创建一个新的Web应用程序在聚合物1.0需要以下布局。

• 一个头面板覆盖整个页面加载时并冷凝成小栏
• 回应式抽屉面板是在移动的情况下，滑动式，并在大屏幕上获得持久的高度。

聚合物已经有其自己的Web组件用于此目的，即 app-header-panel和app-drawer-panel

我想直线前进的解决方案是通过包含标题面板内的整个抽屉面板。他们完美的工作，直到我把它们放在一个页面中。将它们一起使用时，我正面临一些布局问题。

永久性抽屉移动到app-header-panel后面，而不是粘在标题面板的内容区域。 （注意：app-header-layout比app-drawer-panel具有更高的z-index）。

如何解决这个问题？

Answer 1

首先：清除所有试图更改z-index或postion或任何类似app-layout的任何组件的任何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">