Paper-fab 部分隐藏在应用程序工具栏后面

Question

我想导入一个包含 paper-fab 的元素，并让 paper-fab 与 app-header 元素和导入元素之间的接缝重叠。（在这种情况下，我将导入的元素称为 fab-element）。换句话说，我只是希望 paper-fab 到 "float"（正如广告所宣传的那样）。

我期望的样子：

jsBin

实际情况：

FAB 内 app-toolbar。（作品）Click here for jsBin.
FAB 在 app-toolbar 之外但在 app-header 之内。（有效）Click here for jsBin.
FAB 外 app-header 内 main-content。（失败）Click here for jsBin.

我需要使用 app-header-layout 元素并在 main content 部分中导入 fab-element。正如上面的 3 个 jsBins 所示，最后一个组合似乎破坏了元素（导致 paper-fab 的上半部分隐藏在 app-toolbar 下方）。

如何在 app-header-layout 的 main content 部分使用 fab-element 时让整个 paper-fab 浮在 app-toolbar 上？

或者这是否可能暴露 app-header-layout 元素本身的错误？

编辑

z-index（在paper-fab上）没有效果。

请注意，最后一个示例将 z-index 增加到 99999。它似乎仍然对输出没有影响。

编辑 2

z-index（在父元素上）无效。

此外，在父元素 fab-element 上设置 z-index 对结果也没有影响。

编辑 3

我想知道发生的事情与 z-index （阅读评论）是否相关？

Answer 1

Per @robodna 在 Polymer Slack Site 上提供了以下答案：

在 #contentContainer 上设置 z-index:2!important。 See this jsBin.

http://jsbin.com/mitegigose/edit?html,输出

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="iron-icon/iron-icon.html" rel="import">
  <link href="iron-icons/iron-icons.html" rel="import">
  <link href="paper-icon-button/paper-icon-button.html" rel="import">
  <link href="app-layout/app-drawer/app-drawer.html" rel="import">
  <link href="app-layout/app-drawer-layout/app-drawer-layout.html" rel="import">
  <link href="app-layout/app-header-layout/app-header-layout.html" rel="import">
  <link href="app-layout/app-header/app-header.html" rel="import">
  <link href="app-layout/app-toolbar/app-toolbar.html" rel="import">
  <link href="paper-fab/paper-fab.html" rel="import">

</head>
<body>

<dom-module id="fab-element">
  <template>
    <style>
      paper-fab {
        position: absolute;
        right: 40px;
        top: 40px;
        z-index: 99999;
      }
    </style>
    <paper-fab icon="add"></paper-fab>
  </template>
  <script>
    (function(){
      Polymer({
        is: "fab-element",
        properties: {},
      });
    })();
  </script>
</dom-module>

<dom-module id="x-element">

<template>
  <style>
    app-toolbar {
      color: white;
      background-color: #3F51B5;
      z-index: 1;
    }
    app-header-layout ::content #contentContainer {
      z-index: 2!important;
    }
    fab-element {
      z-index: 99999;
    }
  </style>

  <app-header-layout>
    <app-header fixed condenses effects="waterfall">
      <app-toolbar>
        <div main-title>App name</div>
      </app-toolbar>
    </app-header>
    <div>
      main content
      <fab-element></fab-element>
    </div>
  </app-header-layout>

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {},
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Paper-fab 部分隐藏在应用程序工具栏后面

Paper-fab partially hides behind app-toolbar

polymer

polymer-1.0

paper-elements

app-elements

编辑

编辑 2

编辑 3