Paper-fab部分隐藏在应用程序工具栏的后面 [英] Paper-fab partially hides behind app-toolbar
问题描述
我想导入一个包含paper-fab
的元素,并使paper-fab
与app-header
元素和导入的元素之间的接缝重叠. (在这种情况下,我将导入的元素称为fab-element
).换句话说,我只是希望paper-fab
能够浮动"(如广告所宣传的那样,也应该像它应该的那样).
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).
我希望它看起来像什么
实际上是什么样的:
- FAB. (有效)
单击此处获取jsBin . - FAB在
app-toolbar
之外但在app-header
内部. (有效)单击此处获取jsBin . -
app-header
外部和main-content
内部的FAB. (失败)单击此处获取jsBin .
app-toolbar
中的- FAB inside
app-toolbar
. (works) Click here for jsBin. - FAB outside
app-toolbar
but insideapp-header
. (works) Click here for jsBin. - FAB outside
app-header
and insidemain-content
. (fails) Click here for jsBin.
我需要使用app-header-layout
元素并将fab-element
导入到main content
部分中.如上述3个jsBins所示,最后一种组合似乎破坏了元素(导致paper-fab
的上半部分隐藏在app-toolbar
的下面).
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
).
在app-header-layout
的main content
部分中使用fab-element
时,如何使整个paper-fab
漂浮在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
?
或者这是否可能暴露出app-header-layout
元素本身的可能错误?
Or does this potentially expose a possible bug in app-header-layout
element itself?
z-index(在paper-fab
上)无效.
请注意,最后一个示例将z-index
增加到了99999
.它似乎仍然对输出没有影响.
Notice the last example has the z-index
increased to 99999
. It still seems to have no effect on the output.
z-index(在父元素上)无效.
z-index (on parent element) has no effect.
此外,在父元素fab-element
上设置z-index
也不会影响结果.
Also, setting the z-index
on the parent element fab-element
also has no impact on the result.
我想知道与该问题中所述的z-index
(阅读评论)是否相关?
I wonder if what's happening with the z-index
described in this question (read the comments) is related?
推荐答案
聚合物松弛网站上的每个@robodna提供以下答案:
Per @robodna on Polymer Slack Site provides the following answer:
在#contentContainer
上设置z-index:2!important
.
请参阅此jsBin .
<!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部分隐藏在应用程序工具栏的后面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!