Polymer 2 中带有纸张菜单按钮的奇怪 CSS 错误

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 和不透明度，但没有成功。

        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 错误。您可以在此处克隆 repo ...

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（及其内部iron-dropdown）捕获在其中。

我建议在打开菜单时在<paper-item> 上设置z-index：

<paper-menu-button dynamic-align="false" on-opened-changed="_setZindex">

//...

_setZindex(event) {
  // The <paper-menu-button>
  const menu = event.target;
  // The <paper-item>
  const item = menu.parentNode;
  item.style.zIndex = menu.opened ? 101 : null;
}