Question

当我的菜单按钮向下扩展时，具有z-index或不透明度的内容会搞砸。请注意菜单选项如何显示透明背景。

然而，当菜单向上扩展时，它看起来很棒，可以毫无问题地使用。

我的自定义元素会导入一些样式...

<link rel="import" href="../bower_components/paper-styles/color.html">
<link rel="import" href="../bower_components/paper-styles/default-theme.html">

我试图调整z-index和opacity但没有成功。

        paper-listbox paper-item {
            z-index: 9;
            opacity: inherit;
        }

        paper-menu-button paper-icon-button {
            z-index: 2;
            opacity: unset;
        }

以下是纸张菜单按钮的标记......

    <iron-list items="[[collection]]" as="item">
        <template>
            <paper-item>[[item.title_name]]
                <paper-menu-button horizontal-align="right" dynamic-align="false" class="forceRight">
                    <paper-icon-button icon="menu" slot="dropdown-trigger" alt="menu"
                                       role="button"></paper-icon-button>
                    <paper-listbox slot="dropdown-content" role="listbox">
                        <paper-item role="option">songs</paper-item>
                        <paper-item role="option">settings</paper-item>
                        <paper-item role="option">details</paper-item>
                    </paper-listbox>
                </paper-menu-button>
            </paper-item>
        </template>
      </iron-list>

我甚至无法想象为什么菜单选项会向上扩展，但看起来不好向下扩展。我试图创建一个jsbin但失败了。所以我创建了一个小项目来复制css bug。你可以在这里克隆回购......

https://github.com/bwfrieds/css-is-hard

更新：我尝试使用IronOverlayBehavior但失败了。

https://github.com/PolymerElements/paper-menu-button/issues/9

Answer 1

所以这是由stacking context的工作原理造成的。在此特定示例中，<iron-list>中的每个元素都有will-change和transform css属性设置，这会创建一个新的堆叠上下文：这会捕获paper-menu-button（及其内部{ {1}}）在其中。

我建议在菜单打开时在iron-dropdown设置z-index：

<paper-item>

聚合物2中的奇怪的css bug与纸张菜单按钮

1 个答案: