Polymer 聚合物1.x：纸张对话框模式出现在应用程序标题布局后面

我想在

应用程序标题布局中放置一个子元素（子元素）

。子元素包含一个

纸张对话框模式

。当我打开模式时，我希望看到对话框出现在背景前面。相反，对话框显示在背景后面

如何使模态对话框显示在背景前？或者这可能是

应用程序抽屉布局

或

应用程序标题布局

元素中新发现的错误

index.html

x-app.html

抽屉内容
MyNewApp
（功能（）{
聚合物({
是：“x-app”，
属性：{}，
});
})();

content-el.html

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">

<link href="paper-dialog/paper-dialog.html" rel="import">

<dom-module id="content-el">

  <template>
    <button on-tap="show">Click to show dialog</button>
    <paper-dialog id="dialog" modal>
      <h2>Header</h2>
      <div>Dialog body</div>
    </paper-dialog>
  </template>

  <script>
    (function(){
      Polymer({
        is: 'content-el',
        properties: {},
        show: function() {
          this.$.dialog.open();
        },
      });
    })();
  </script>

</dom-module>

单击以显示对话框
标题
对话体
（功能（）{
聚合物({
是‘内容el’，
属性：{}，
show:function（）{
此.dialog.open（）；
},
});
})();

这是一个已知的问题（请参阅和github问题），但遗憾的是，

纸质对话框使用的没有很好的文档化限制：

您必须确保没有元素具有更高级别的堆栈上下文
z索引比其父堆栈上下文更高。你应该把这个
尽可能将元素作为的子元素

一种解决方法是将
纸张对话框
移到
内容el
之外，也移到
应用程序标题布局
之外（可以移到
index.html
中，或者作为根
我的应用程序
元素的直接子元素）。您可以触发事件（即
打开对话框
并在根元素中处理该事件）。
奇怪-我下载了plunk，并使用chrome开发工具在本地运行它。覆盖图的z索引为102，对话框的z索引为103，但仍在覆盖图后面。@akc42这背后的原因是
z索引：0
的
应用程序标题布局
和
的contentContainer
（纸张的父对话框）。@a1626:。。。
<link href="content-el.html" rel="import">

<base href="https://polygit.org/components/">

<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.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="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">

<dom-module id="x-app">

<template>

  <style></style>

  <app-drawer-layout>
    <app-drawer>
      drawer-content
    </app-drawer>
    <app-header-layout>
      <app-header>
        <app-toolbar>
          <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
          <div main-title>MyNewApp</div>
        </app-toolbar>
      </app-header>

      <content-el></content-el>

    </app-header-layout>
  </app-drawer-layout>

</template>

<script>
  (function(){
    Polymer({
      is: 'x-app',
      properties: {},
    });
  })();
</script>

</dom-module>

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">

<link href="paper-dialog/paper-dialog.html" rel="import">

<dom-module id="content-el">

  <template>
    <button on-tap="show">Click to show dialog</button>
    <paper-dialog id="dialog" modal>
      <h2>Header</h2>
      <div>Dialog body</div>
    </paper-dialog>
  </template>

  <script>
    (function(){
      Polymer({
        is: 'content-el',
        properties: {},
        show: function() {
          this.$.dialog.open();
        },
      });
    })();
  </script>

</dom-module>