纸质菜单不显示在前景

Question

我有这个问题：

当我访问页面时，纸张菜单显示正确但当我向下滚动并返回顶部时，纸张菜单位于div后面（带有id导航）。我尝试使用z-index和positons，但没有任何效果。

CSS：

paper-scroll-header-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color:  #eee;
}

paper-toolbar {
  /* custom toolbar height */
  height: 100px;
  background-color: #6a1b9a;
  overflow: visible;
}
#nav {
  background-color: #6a1b9a;
}

HTML：

<paper-scroll-header-panel condenses keep-condensed-header header-height="100" condensed-header-height="50">

  <paper-toolbar>

   <h1>Some text</h1>
    <div class="flex"></div>
    <paper-menu-button>
      <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
      <paper-menu class="dropdown-content">
        <paper-item>Share</paper-item>
        <paper-item>Settings</paper-item>
        <paper-item>Help</paper-item>
      </paper-menu>
    </paper-menu-button>

   <div id="nav" class="flex bottom fit">
            <paper-tabs noink  >
              <paper-tab >Tab1</paper-tab>         
              <paper-tab >Tab2</paper-tab>
              <paper-tab >Tab3</paper-tab>
              <paper-tab >Tab4</paper-tab>
            </paper-tabs>
  </div>

  </paper-toolbar>

  <div class="content">

    <sample-content size="100"></sample-content>

  </div>

</paper-scroll-header-panel>

If you want to play around with code...（我不知道如何将聚合物导入jsbin或codepin。它说的是没有第三方使用的。）