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>