是否可以在全屏div的前面显示全屏div之外的HTML元素？
Is it possible to show HTML elements that are outside of a fullscreened div in front of the fullscreened div?
提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
我知道如何在需要的情况下使用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>
问题暂未有回复.您可以查看右边的相关问题.
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.