Paper-fab 部分隐藏在应用工具栏后面答案

【问题标题】：Paper-fab partially hides behind app-toolbarPaper-fab 部分隐藏在应用工具栏后面
【发布时间】：2016-10-01 22:26:22
【问题描述】：

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

我期望它的样子：

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 元素并在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-indexdescribed in this question（阅读cmets）发生的事情是否相关？

【问题讨论】：

这似乎是一个错误。 So unless new information comes in, I will raise this as an issue here for now.
Per @robodna on Polymer Slack Site：我认为这与 app-header-layout 将自身置于前面有关很久以前的问题......也许孩子的z-index也是如何获得范围的......即使您在子元素上将z-index设置为9999，它也不会出现在某些元素的前面z-index 1，取决于它们的嵌套方式……这就是问题所在……内容作为子项嵌套，并且标题在树中较高
Per @rob：工厂需要住在那个元素里面吗？它可以在整个布局之外并且只是固定位置吗？ jsbin.com/taruqiw/2/edit?html,output ...我之所以这么说是因为如果你把它放在布局中，我想你可能需要强制app-header 到z-index: 0 使按钮重叠，但是布局中的所有文本都会重叠滚动页面时也是如此
Per @robodna：看起来我可能在应用程序标题上设置了以下样式：app-header { @apply(--layout-fixed-top); z-index: 1; --app-header-shadow: { box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.2); height: 10px; bottom: -10px; }; }
我没有看到它改变了结果中的任何内容...jsbin.com/sajawaledu/1/edit?html,output ...您有证明它有效的垃圾箱吗？

标签： polymer polymer-1.0 paper-elements app-elements

【解决方案1】：

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

在#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>

【讨论】：