title: How to display an html element on top of a full screen element?
body: <p>I'm working on a web based video chat portal and would like to display a small video stream of the user while the user is in fullscreen mode. Basically, I want to place a selfview div on top of a fullscreen element. Here is a simplied example of the html structure:</p>
  
  <pre><code>&lt;div class="fullscreen-element"&gt;
          &lt;div class="main-video-container"&gt;
              &lt;video class="main-video"&gt;&lt;/video&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  // In another area of the html
  
      &lt;video class="self-view overlay-element"&gt;&lt;/video&gt;
  
  // Css example
  
     .self-view {
         position: absolute;
         z-index: 2147483647;
     }
  </code></pre>
  
  <p>Here are the problems I'm running into:
   - the selfview overlay div cannot be place within the fullscreen element.
   - maxing ou the z-index on the overlay doesn't work either.
   - displaying a new element apon entering fullscreen will not work because it inturrupts the socket.</p>
  
  <p>Other information:
   - I'm using the <code>.requestFullscreen()</code> method to enter fullscreen mode.</p>
  
  <p>I'm also open to alternative methods for entering fullscreen as long as they support overlaying.</p>