Displaying elements other than fullscreen element (HTML5 fullscreen API)

Question

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 t

Answer 1

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

Also, in Chrome dev tools:

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.