如何在全屏元素上方显示html元素？

Question

我正在使用基于Web的视频聊天门户，并且希望在用户处于全屏模式时显示该用户的一小段视频流。基本上，我想在全屏元素的顶部放置一个selfview div。这是html结构的简化示例：

<div class="fullscreen-element">
        <div class="main-video-container">
            <video class="main-video"></video>
        </div>
    </div>

// In another area of the html

    <video class="self-view overlay-element"></video>

// Css example

   .self-view {
       position: absolute;
       z-index: 2147483647;
   }

这是我遇到的问题：  -自视叠加层div不能放置在全屏元素内。  -最大化叠加层上的z索引也不起作用。  -显示新元素并进入全屏状态将不起作用，因为它会干扰套接字。

其他信息：  -我正在使用.requestFullscreen()方法进入全屏模式。

只要支持覆盖，我也会接受进入全屏显示的替代方法。