2

I know how to overlay HTML elements that are within the div being made fullscreen, using z-index where needed. For example, this works fine:

<div id='will-be-fullscreen'>
    <div class='visible-in-fullscreen-mode'>Hi</div>
</div>

However I have the following situation:

<div id='third-party-code-that-will-be-fullscreen'></div>

<div class='should-be-visible-in-fullscreen-mode'>Hi</div>

I don't have the possibility of putting my HTML (the 'Hi' div) inside the div that will be fullscreened, nor do I have control over the js that makes it fullscreen. As a result, no-one can see my HTML because it's behind the fullscreened div. z-index didn't seem to make a difference.

Is there any way to have HTML that exists outside of the fullscreen div and is still visible on top of the fullscreen div?

EDIT: jsfiddle example: https://jsfiddle.net/sqnLegvb/2/

function openFullscreen(elem) {
document.getElementById('openFS').style.display = 'none';
document.getElementById('closeFS').style.display = 'block';
try {
if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
    }
}

catch (e) {
console.log(e);
}
}

function closeFullscreen() {
document.getElementById('openFS').style.display = 'block';
document.getElementById('closeFS').style.display = 'none';

    try {

        var isFullscreen = document.fullscreenElement || document.mozFullScreenElement ||
            document.webkitFullscreenElement || document.msFullscreenElement;
        if (isFullscreen) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            onCloseFullscreen();
        }

    } catch (e) {
       // console.log(e);
    }


}
#fullscreenMe {
  background: red;
  position: absolute;
  z-index: 1;
  top:0;
  left:0;
  height:100%;
  width:100%;
}

#pagewrapper {
  position: absolute;
top:0;
  left:0;
  height:100%;
  width:100%;
 
}
#hideAndSeek {
  position: absolute;
  z-index:1;
  top:10px;
  left:10px;
 background: yellow;

}
button {
  position: absolute;
  top:10px;
  right:0px;
  z-index:2
}
<div id='pagewrapper'>

<div id='fullscreenMe'>
<button onclick="closeFullscreen();" style="display:none;" id="closeFS">
Close Full Screen
</button>
</div>
<div id="hideAndSeek">
Can you see me?
</div>
<button onclick="openFullscreen(document.getElementById('fullscreenMe'));" id="openFS">
Full Screen
</button>

</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Ben Holness
  • 2,457
  • 3
  • 28
  • 49
  • Did you make sure your `z-index` was partnered with a `position:relative;` or `position:absolute;` ? Are you able to see the z-index of the fullscreen element with an inspector? – XLIME Jan 25 '21 at 19:44
  • I did. From what I can tell the fullscreen element has no z-index, but I tried setting it to -1 and it did nothing. – Ben Holness Jan 25 '21 at 19:49
  • did oyu set position:relative to `should-be-visible-in-fullscreen-mode` – Temani Afif Jan 25 '21 at 20:05
  • `should-be-visible-in-fullscreen-mode` already had `position: absolute` which should work, but I tried changing it to relative to check, it made no difference. – Ben Holness Jan 25 '21 at 20:09
  • are you able to show us a working code? even a link to a website? – Temani Afif Jan 25 '21 at 20:12
  • Not immediately, but I can throw one together in a little while which reproduces it. I was wondering if it was a known situation with fullscreened elements. – Ben Holness Jan 25 '21 at 20:14
  • it's no something common, you have for sure something else creating the issue – Temani Afif Jan 25 '21 at 20:16
  • Recreated at https://jsfiddle.net/sqnLegvb/2/ but all with `position:absolute`, which I think should be fine too? – Ben Holness Jan 25 '21 at 20:39
  • it's probably a browser feature then. Even if you make the fullscreen element transaprent you will see nothing – Temani Afif Jan 25 '21 at 20:42
  • Hence my question whether there is any way to make a div outside of the fullscreened element appear in front of it :) – Ben Holness Jan 25 '21 at 20:44

0 Answers0