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

2024-04-22

我想导入一个包含paper-fab并拥有paper-fab重叠之间的接缝app-header元素和导入的元素。（在本例中，我将导入的元素称为fab-element）。换句话说，我只是想要paper-fab“漂浮”（正如广告所言，就像它应该的那样）。

我期望它看起来像什么：

jsBin http://jsbin.com/qagudomowa/1/edit?html,output

它实际上是什么样子：

内部FABapp-toolbar。（作品）单击此处获取 jsBin http://jsbin.com/celumequza/1/edit?html,output.
外边FABapp-toolbar但里面app-header。（作品）单击此处获取 jsBin http://jsbin.com/liqogucusi/1/edit?html,output.
外边FABapp-header和里面main-content。（失败）单击此处获取 jsBin http://jsbin.com/depijoboci/1/edit?html,output.

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

我如何获得整个paper-fab漂浮在app-toolbar在使用时fab-element在 - 的里面main content的部分app-header-layout?

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

Edit

z 索引（上paper-fab) 没有影响。

请注意最后一个示例有z-index增加到99999。看来对输出还是没有影响。

Edit 2

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

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

Edit 3

我想知道发生了什么事z-index 这个问题中描述的 https://stackoverflow.com/q/39803097/1640892（阅读评论）有关系吗？

根据@robodna聚合物闲置站点 http://polymer.slack.com提供以下答案：

Set z-index:2!important on #contentContainer. 看到这个jsBin http://jsbin.com/mitegigose/edit?html,output.

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>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)