Paper-fab partially hides behind app-toolbar

问题

I want to import an element that contains a paper-fab and have the paper-fab overlap the seam between the app-header element and the imported element. (In this case, I'm calling the imported element a fab-element). In other words, I simply want the paper-fab to "float" (as advertised and like it's supposed to).

What I expect it to look like:

jsBin

What it actually looks like:

FAB inside app-toolbar. (works) Click here for jsBin.
FAB outside app-toolbar but inside app-header. (works) Click here for jsBin.
FAB outside app-header and inside main-content. (fails) Click here for jsBin.

I need to use the app-header-layout element and import the fab-element inside the main content section. As the above 3 jsBins show, that last combination seems to break the element (causing the top half of the paper-fab to hide underneath the app-toolbar).

How do I get the entire paper-fab to float over the app-toolbar while using the fab-element inside the main content section of the app-header-layout?

Or does this potentially expose a possible bug in app-header-layout element itself?

Edit

z-index (on paper-fab) has no effect.

Notice the last example has the z-index increased to 99999. It still seems to have no effect on the output.

Edit 2

z-index (on parent element) has no effect.

Also, setting the z-index on the parent element fab-element also has no impact on the result.

Edit 3

I wonder if what's happening with the z-index described in this question (read the comments) is related?

回答1:

Per @robodna on Polymer Slack Site provides the following answer:

Set z-index:2!important on #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>

来源：https://stackoverflow.com/questions/39502060/paper-fab-partially-hides-behind-app-toolbar

标签

polymer

polymer-1.0

paper-elements

app-elements