Polymer Starter Kit app-drawer＆amp;应用程序标题显示在全屏视频之上

Question

我正在使用Polymer Starter Kit，我在其中一个echo -n "$READ" > $PWD/.2displaypH.tmp元素的网页中添加了一些YouTube视频。当我点击以全屏模式观看视频时，旁边<google-youtube>和顶部app-drawer会保留并覆盖视频。如何隐藏抽屉和标题？

app-header用法：

app-drawer

<app-drawer paper-drawer-toggle class="appDrawer" id="menu" on-tap="closeMenu"> <div class="appDrawerBackground"> <app-toolbar class="appDrawer">Menu</app-toolbar> <hr class="menuLine"> <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation"> <a class="homeMargin" name="home" href="/home">Biography</a> <hr> <a name="view1" href="/acting">Acting</a> <hr> <a name="view2" href="/produce">Directing / Producing</a> <hr> <a name="view3" href="/contact">Contact</a> </iron-selector> </div> </app-drawer> 用法：

app-header

截图：

Answer 1

Polymer Starter Kit的根布局元素app-drawer-layout包含app-drawer和app-header，两者都有自己的stacking context's with a positive z-index - 一个高于<iron-pages>孩子，可能包含<google-youtube>元素。由于<google-youtube>处于比标题和抽屉更低的堆叠上下文中，因此仅视频z-index无法将其移至前面。

要进行补偿，您可以使用以下CSS将app-header和app-drawer移至否定z-index，从而允许<google-youtube>的内部视频在其上方堆叠全屏。 （这是在Mac OS Sierra上的Chrome 56，Firefox 50和Safari 10上测试的）

app-drawer-layout:-webkit-full-screen-ancestor app-header,
app-drawer-layout:-webkit-full-screen-ancestor app-drawer {
  z-index: -1 !important;
}

请注意，:-webkit-full-screen-ancestor伪类适用于全屏元素的所有祖先（即<google-youtube>的视频元素），并在退出全屏时自动删除。这个WebKit伪类目前没有我能找到的文档。请注意，从Firefox 50中删除了Gecko等效项（:-moz-full-screen-ancestor），尽管:-webkit-full-screen-ancestor仍可在此处使用。