显示全萤幕元素以外的元素(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屋!