显示全萤幕元素以外的元素（HTML5全萤幕API） [英] Displaying elements other than fullscreen element (HTML5 fullscreen API)
问题描述
当我全屏一个元素（我们说一个div），我不能得到任何其他元素出现（在全屏模式下）。为什么会发生？我如何完成这项工作？
When I "fullscreen" an element (let's say a div), I can't get anything other elements to appear (while in fullscreen mode). Why is that happening? How can I accomplish this?
Related: Is there a way to overlay a <canvas> over a fullscreen HTML5 <video>?
推荐答案
似乎浏览器（Chrome 28，Firefox 23）已设置为全屏HTML5<全局元素的 z-index 到2147483647（最大的32位有符号数）。根据测试，将其他元素的 z-index 设置为相同的 z-index 但是不能改变全屏元素的 z-index （它可以，但是浏览器只是忽略了值 - 即使有！important）。
It seems that browsers (Chrome 28, Firefox 23) set the z-index of fullscreened elements to 2147483647 (the largest 32-bit signed number). According to tests, setting the z-index of other elements to the same z-index will cause them to show, but the z-index of the fullscreened element can not be changed (it can, but the browser just ignores the value — even with !important).
也许是我能找到的唯一参考：
Maybe the only reference I could find to this:
https://github.com/WebKit/webkit/blob/master/LayoutTests/fullscreen/full-screen-zIndex.html
此外，在Chrome开发工具中：
Also, in Chrome dev tools:
因此，要么将元素设置为最大值 z-index ，或者，更好的解决方案是创建一个容器元素，使所有要显示的元素都是容器元素的子元素，并将其全屏。
So either set elements to the maximum z-index, or, the better solution would be to just create a container element, make it so that all elements you want to display are children of the container element, and fullscreen it.
这篇关于显示全萤幕元素以外的元素（HTML5全萤幕API）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
