聚合物纸张下拉菜单不会覆盖铁列表

Question

我的问题与此处的问题类似：paper-menu-button's dropdown (paper-menu) not overlaying other iron-list items，但没有提出适当的解决方案。

问题是我有一个<paper-dropdown-menu>，它在其所在的<iron-list>项目中正确打开，但位于以下<iron-list>项目下方： < / p>

我有一个像这样的简单<paper-dropdown-menu>：

<paper-dropdown-menu-light class="custom" label="Languages" no-label-float>
  <paper-listbox class="dropdown-content" selected="1">
    <paper-item>Spanish</paper-item>
    <paper-item>English</paper-item>
    <paper-item>French</paper-item>
    <paper-item>Sinhala</paper-item>
  </paper-listbox>
</paper-dropdown-menu-light>

插入另一个带有<iron-list>的元素（使用<iron-ajax>加载JSON文件）：

<iron-list id="list" items="[[bookList.books]]" as="item">
  <template>
    <div>
      <div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]" style="z-index: 1;">
        <div class="avatar">[[item.id]]</div>
        <div class="pad">
          <div class="primary">[[item.titleen]]</div>
          <div class="shortText">[[item.slug]]</div>
          <div class="longText">[[item.blurb]]</div>
            <div class="languagedrop">
              <language-drop></language-drop>
            </div>
        </div>

      </div>
    </div>
  </template>
</iron-list>

我尝试将每个<iron-list>项的z-index设置为1，但这不起作用。我尝试过与<iron-overlay>合作，但我没有成功完成任务。我对Polymer非常陌生，所以如果有人有解决方案或解决方案那么会很棒。

Answer 1

这是因为iron-list正在为每个列表项使用transform: translate3d。 我找到的解决方法是将z-index添加到您展开下拉列表的当前列表项（<div class="item"></div>），或者以编程方式从降序开始将所有项目从上到下添加到所有项目。