Polymer Paper fab部分隐藏在应用程序工具栏后面_Polymer_Polymer 1.0_Paper Elements_App Elements

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

polymer

Polymer Paper fab部分隐藏在应用程序工具栏后面,polymer,polymer-1.0,paper-elements,app-elements,Polymer,Polymer 1.0,Paper Elements,App Elements,我想导入一个包含纸张制作的元素，并使纸张制作重叠应用程序标题元素和导入元素之间的接缝。（在本例中，我将导入的元素称为afab元素）。换句话说，我只是想让纸厂浮动（就像广告宣传的那样，就像它应该的那样）我所期望的是：它实际上是什么样子的： FAB inside应用程序工具栏。（工作）晶圆厂外部应用程序工具栏，但内部应用程序标题。（工作）晶圆厂外部应用程序标题和内部主要内容。（失败）我需要使用应用程序标题布局元素，并在主要内容部分内导入fab元素。正如上面3个JSBIN所示，最后一个

我想导入一个包含

纸张制作

的元素，并使

纸张制作

重叠

应用程序标题

元素和导入元素之间的接缝。（在本例中，我将导入的元素称为a

fab元素

）。换句话说，我只是想让

纸厂

浮动（就像广告宣传的那样，就像它应该的那样）

我所期望的是：

它实际上是什么样子的：

FAB inside

应用程序工具栏

。（工作）

晶圆厂外部

应用程序工具栏

，但内部

应用程序标题

。（工作）

晶圆厂外部

应用程序标题

和内部

主要内容

。（失败）

我需要使用

应用程序标题布局

元素，并在

主要内容

部分内导入

fab元素

。正如上面3个JSBIN所示，最后一个组合似乎破坏了元素（导致

纸张制作

的上半部分隐藏在

应用程序工具栏

下面）

在

应用程序标题布局的主要内容
部分中使用fab元素
时，如何使整个纸厂
漂浮在应用程序工具栏
上
或者这是否有可能暴露应用程序标题布局
元素本身中可能存在的错误
编辑
z指数（在造纸厂）无效。

请注意，最后一个示例将z-index
增加到99999
。这似乎仍然对产量没有影响
编辑2
z索引（在父元素上）没有影响。
此外，在父元素fab元素
上设置z索引
，也不会对结果产生影响
编辑3
我想知道z-index（阅读评论）的情况是否与之相关？
Per@robodna on提供了以下答案：
设置z索引：2！关于#contentContainer的重要信息。

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>


造纸厂{
位置：绝对位置；
右：40px；
顶部：40px；
z指数：99999；
}
（功能（）{
聚合物({
是：“晶圆厂元素”，
属性：{}，
});
})();
应用程序工具栏{
颜色：白色；
背景色：#3F51B5；
z指数：1；
}
应用程序标题布局：：内容#内容容器{
z指数：2！重要；
}
晶圆厂元素{
z指数：99999；
}
应用程序名称
主要内容
（功能（）{
聚合物({
是：“x元素”，
属性：{}，
});
})();
这似乎是一个bug。Per@robodna on:我认为这与应用程序标题布局有关，它会用一个！在某个地方很重要，但我不记得前一段时间我遇到过这个问题……也许孩子们的z指数也是如何确定的。。。即使将子元素的z-index设置为9999，它也不会出现在某些z-index为1的元素前面，具体取决于它们的嵌套方式。。。这就是问题所在。。。内容被嵌套为子元素，标题在treePer@rob中位于更高的位置：fab是否需要位于该元素内部？它可能在整个布局之外，只是位置固定吗。。。我之所以这么说，是因为如果你把它放在布局中，我想你可能需要强制应用程序标题
到z-index:0
以使按钮重叠，但是当你滚动pagePer@robodna时，布局中的所有文本也会重叠：看起来我可能在应用程序标题上设置了以下样式：应用程序标题{@apply（--layout fixed top）；z-index:1；--应用程序标题阴影：{box shadow:inset 0px 5px 6px-3px rgba（0,0,0.2）高度：10px；底部：-10px；}；}
我看不出它在结果中改变了什么。。。你有证明它有效的箱子吗？