Question

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

我期望它看起来像：

jsBin

它实际上是什么样的：

app-toolbar内的FAB。（作品）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元素并导入fab-element部分中的main content。正如上面的3个jsBins所示，最后一个组合似乎打破了元素（导致paper-fab的上半部分隐藏在app-toolbar下面。

如何在使用paper-fab的{{1}}部分内的app-toolbar时让整个fab-element浮动main content？

或者这是否可能会在app-header-layout元素本身中暴露出一个可能的错误？

修改

z-index（在app-header-layout上）无效。

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

编辑2

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

此外，在父元素99999上设置z-index也不会对结果产生影响。

编辑3

我想知道fab-element described in this question（阅读评论）发生的事情是否相关？

Answer 1

Polymer Slack Site上的每个@robodna提供以下答案：

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

http://jsbin.com/mitegigose/edit?html,output

<!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部分隐藏在app-toolbar

修改

编辑2

编辑3

1 个答案: