是否可以在全屏 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。
我知道如何覆盖 div 中的 HTML 元素，在需要时使用z-index进行全屏显示。 例如，这很好用：
<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.