使一个 div 在另一个 div 的全屏上可见答案

【问题标题】：Make a div visible on full screen of another div使一个 div 在另一个 div 的全屏上可见
【发布时间】：2021-02-18 09:17:53
【问题描述】：

我使用下面的方法让一个元素全屏显示：

if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
} else {
  return;
}

效果很好，但我想在全屏模式下显示另一个元素。

另一个元素有position: fixed 和z-index: 999999999，但在全屏模式下不可见。

有人可以帮帮我吗？

下面是示例的链接

https://stackblitz.com/edit/web-platform-z1phjd?file=index.html

所以我想在红色元素全屏时显示蓝色元素。

【问题讨论】：

z-index 有帮助吗！
我试过z-index但没用。
可以添加你尝试过的html和css吗？
我将添加 stackblitz 示例
另外，我无法加载您附加的示例。网页卡在加载 3 分钟左右。

标签： javascript html

【解决方案1】：

似乎曾经可以用 z-index 解决这个问题，但后来被更新的浏览器版本修补 - See this thread

我相信Tushar Vaghela's 的答案是您实现所需结果的最佳机会，即在全屏元素中包含您希望覆盖的元素 - See this thread。

【讨论】：

【解决方案2】：

也许围绕所有全屏元素的 div 将起作用，然后您可以根据需要在其中放置元素。见小提琴：https://jsfiddle.net/840urcsf/6/

sn-p 不启用全屏，但它可以：

(() => {
  const btn = document.querySelector(".make-fullscreen");

  btn.addEventListener("click", () => {
    const element = document.querySelector(".fullscreen-container");
    console.log(element);
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else {
      return;
    }
  });
})();

body {
  background: orange;
}

.fullscreen-element {
  width: 400px;
  height: 400px;
  background: red;
}

.other-element {
  width: 100px;
  height: 100px;
  padding: 24px;
  background: blue;
  position: fixed;
  top: 60px;
  left: 60px;
  color: white;
}

<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="fullscreen-container">
      <div class="fullscreen-element">
          <button class="make-fullscreen">Fullscreen</button>
      </div>
    <div class="other-element">
          other element
      </div>
      </div>
    <script src="script.js"></script>
</body>

</html>

【讨论】：

【解决方案3】：

这里是jsfiddle demo, 您可以通过监听fullscreenchange 事件并按照以下步骤操作 dom：

1-在全屏模式下将other-element 元素添加为fullscreen-element 的子元素。

2-将other-element 带回正常模式下的原始位置。

(() => {
  const btn = document.querySelector(".make-fullscreen");
  const element = document.querySelector(".fullscreen-element");
  const other = document.querySelector(".other-element");

  element.addEventListener("fullscreenchange", event => {
    if (document.fullscreenElement) {
      element.appendChild(other);
    } else {
      element.parentNode.insertBefore(other,element.nextSibling)
    }
  });

  btn.addEventListener("click", () => {
    if (element.requestFullscreen) {
      element.requestFullscreen().catch(err => {
        console.log(err);
      });
  });
})();

【讨论】：

在保持其他元素的位置的同时不可能吗？
什么意思？
当它在全屏时，您正在移动全屏元素内的其他元素？我不想移动元素
我猜你可以克隆other-element节点，全屏插入full-element，普通模式删除。
@yash 我更新了jsfiddle 以使用克隆方法

【解决方案4】：

全屏在这里工作：https://jsfiddle.net/trentHarlem/7861L0ph/

(() => {
  const element = document.querySelector('.fullscreen-element');
  const other = document.querySelector('.other-element');
  const btn = document.querySelector('.make-fullscreen');

  btn.addEventListener('click', (event) => {
    //event.preventDefault();
    if (document.fullscreenElement) {
    

      document.exitFullscreen();
    } else {
      element.requestFullscreen();
    
    }
  });
})();

body {
  background: orange;
}

.fullscreen-element {
  width: 400px;
  height: 400px;
  background: red;
}

.other-element {
  width: 100px;
  height: 100px;
  padding: 24px;
  z-index: 999999999999;
  background: blue;
  position: fixed;
  top: 60px;
  left: 60px;
  color: white;
}

 <div class="fullscreen-element">
      <button class="make-fullscreen">TOGGLE Fullscreen</button>
      <div class="other-element">other element</div>
    </div>

【讨论】：

其实和我的没什么不同。看起来它只是切换了蓝色元素的可见性。我需要全屏显示蓝色元素。
您能否说明您希望在全屏而不是全屏上看到哪些蓝色/红色元素。我已经可以看到两者，所以我假设你想要一个切换
我更新了我的尝试，但我仍然不确定你在寻找什么。我确实注意到全屏功能并不总是在代码编辑器中正常工作。所以我正在使用 vs 代码。 JS fiddle 似乎不那么古怪，所以我添加了一个链接

【解决方案5】：

简单地将“其他元素”移动到“全屏元素”内部怎么样？并将“全屏元素”位置更改为相对位置。

(() => {
  const btn = document.querySelector(".make-fullscreen");

  btn.addEventListener("click", () => {
    const element = document.querySelector(".fullscreen-element");
    console.log(element);
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else {
      return;
    }
  });
})();

body {
  background: orange;
}

.fullscreen-element {
  width: 400px;
  height: 400px;
  background: red;
  position:relative;
}

.other-element {
  width: 100px;
  height: 100px;
  padding: 24px;
  z-index: 999999999999;
  background: blue;
  position: fixed;
  top: 60px;
  left: 60px;
  color: white;
}

<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <div class="fullscreen-element">
        <button class="make-fullscreen">Fullscreen</button>

        <div class="other-element">
        other element
      </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

【讨论】：