是否可以在全屏 div 前面显示全屏 div 之外的 HTML 元素？

Question

我知道如何在需要的地方使用 z-index 覆盖正在全屏显示的 div 中的 HTML 元素。例如，这工作正常：

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

但是我有以下情况：

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

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

我无法将我的 HTML（'Hi' div）放在将被全屏显示的 div 中，我也无法控制使其全屏显示的 js。结果，没有人可以看到我的 HTML，因为它位于全屏 div 的后面。 z-index 似乎没有什么不同。

有什么办法可以让 HTML 存在于全屏 div 之外并且仍然可见于全屏 div 之上？

编辑：jsfiddle 示例：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>