CSS 全屏元素以外的元素展示（HTML5全屏API）

在本文中，我们将介绍如何利用CSS来展示全屏元素以外的其他元素，并使用HTML5全屏API进行示例说明。

阅读更多：CSS 教程

什么是HTML5全屏API？

HTML5全屏API是一种用于在网页中全屏展示特定元素的API。它允许开发人员在全屏模式下呈现特定的元素，而不是整个页面。这对于创建视频播放器、幻灯片演示等应用非常有用。

使用CSS显示全屏元素以外的其他元素

默认情况下，当使用HTML5全屏API时，其他元素会被隐藏。然而，通过一些CSS技巧，我们可以实现在全屏模式下同时展示其他元素。

首先，我们可以利用z-index属性来控制元素的堆叠顺序。为了确保其他元素在全屏元素的上方可见，我们可以给它们添加一个较高的z-index值。例如：

#fullscreen-element {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  z-index: 1;
}

#content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

在上面的示例中，我们将全屏元素的z-index属性设置为1，将其他元素的z-index属性设置为2。这样，#content元素将显示在全屏元素的上方。

除了z-index，我们还可以使用其他CSS属性来控制元素的可见性和位置，例如opacity和position。通过适当调整这些属性，我们可以实现在全屏模式下同时展示其他元素。

示例

下面是一个完整的示例，展示了如何使用HTML5全屏API和CSS来展示全屏元素以外的其他元素：

<!DOCTYPE html>
<html>
<head>
  <style>
    #fullscreen-element {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: black;
      z-index: 1;
    }

    #content {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 24px;
      z-index: 2;
    }
  </style>
</head>
<body>
  <div id="fullscreen-element"></div>
  <div id="content">这是全屏元素以外的内容</div>

  <script>
    document.getElementById("fullscreen-element").addEventListener("click", function() {
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.mozRequestFullScreen) { 
        document.documentElement.mozRequestFullScreen();
      } else if (document.documentElement.webkitRequestFullscreen) { 
        document.documentElement.webkitRequestFullscreen();
      } else if (document.documentElement.msRequestFullscreen) { 
        document.documentElement.msRequestFullscreen();
      }
    });
  </script>
</body>
</html>

在上面的示例中，当点击全屏元素时，将通过HTML5全屏API进入全屏模式，并且#fullscreen-element元素将以全屏展示，而#content元素将显示在全屏元素的上方。