title: Using z-index with relative and absolute positioning
body: <p>I created a JSfiddle to try and demonstrate what I'm trying to do. Excuse the duplicate use of video, but hopefully it gives the idea. <a href="https://jsfiddle.net/alexw129/z1nakg82/16/" rel="nofollow noreferrer">https://jsfiddle.net/alexw129/z1nakg82/16/</a></p>
  
  <p>I'm trying to use the <code>z-index</code> &amp; positioning to generate a <code>PNG</code> image of window with a fire place (window background and inside the fire place is deleted so is blanked out in the PNG image). This is a link to the image </p>
  
  <p><a href="https://i.stack.imgur.com/7ruLK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7ruLK.png" alt="image of a window scene with fire place"></a></p>
  
  <p>I want to be able to place a video of snowy scene in the background of the image, which stays relative to the size of image as the screen moves (should take up <code>80%</code> of the screen).</p>
  
  <p>I also want a video of a fire as background to the fireplace, which would need to stay positioned in the correct place relative to the image. Does any body have any ideas on how I could achieve this?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="normalise.css"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
    &lt;div class="main-header"&gt;
  
      &lt;p&gt; This is the header&lt;/p&gt;
  
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
  
      &lt;img src="images/pic3.png"&gt;
  
      &lt;video class="snow" autoplay controls&gt;
                      &lt;source src="videos/vid1.mov" type="video/mp4"&gt;
                  &lt;/video&gt;
  
      &lt;video class="fire" autoplay controls&gt;
                      &lt;source src="videos/vidfire.mp4" type="video/mp4"&gt;
                  &lt;/video&gt;
  
    &lt;/div&gt;
  
    &lt;footer class="main-footer"&gt;
      &lt;p&gt; This is the footer &lt;/p&gt;
  
    &lt;/footer&gt;
  
    &lt;video class="fire" autoplay controls&gt;
  
                  &lt;/video&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container {
    width: 80%;
    margin: 0 auto;
    // background-color:blue;
    height: 1000px;
    text-align: centre;
    text-align: centre;
  }
  
  .snow {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 1;
  }
  
  .fire {
    position: relative;
    width: 940px;
    z-index: 2;
    position: center-left;
    bottom: 500px;
    left: 715px;
    height: 350px;
  }
  
  .container img {
    position: relative;
    z-index: 3;
    width: 80%;
    text-align: centre;
  }
  
  .main-header {
    background-color: yellow;
  }
  
  .main-footer {
    background-color: green;
  }
  </code></pre>