css - Is it possible to show HTML elements that are outside of a fullscreened div in front of the fullscreened div?

Question

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>

question from:https://stackoverflow.com/questions/65890794/is-it-possible-to-show-html-elements-that-are-outside-of-a-fullscreened-div-in-f

Answer 1

Waitting for answers