显示全屏元素以外的元素（HTML5全屏API）

Question

当我“全屏”一个元素（让我们说一个div）时，我无法显示任何其他元素（在全屏模式下）。为什么会这样？我怎么能做到这一点？

相关：Is there a way to overlay a <canvas> over a fullscreen HTML5 <video>?

Answer 1

似乎浏览器（Chrome 28，Firefox 23）将全屏幕元素的z-index设置为2147483647（最大的32位有符号数）。根据测试，将其他元素的z-index设置为相同z-index将导致它们显示，但是全屏幕元素的z-index无法更改（它可以，但浏览器只是忽略了价值 - 即使是！important）。

也许是我能找到的唯一参考：

https://github.com/WebKit/webkit/blob/master/LayoutTests/fullscreen/full-screen-zIndex.html

另外，在Chrome开发工具中：

因此要么将元素设置为最大z-index，要么更好的解决方案是创建一个容器元素，使其成为所有要显示的元素都是容器元素的子元素，并全屏显示