title: Multiple Divs that Stretch to size of window
body: <p>I was able to make one <code>div</code> go to the stretch of the window size AKA fill the screen. Now I'm wondering how the rest don't overlap each other so I can scroll through each of them in order, retaining the centered text in each div as well? Right now, it's only displaying thing 3.</p>
  
  <p><a href="http://jsfiddle.net/592NY/1/" rel="nofollow noreferrer">http://jsfiddle.net/592NY/1/</a></p>
  
  <p>What I am trying to achieve:
  <img src="https://i.stack.imgur.com/KilI9.png" alt="demo"></p>
  
  <p>Here is the annotated CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>/* Each of the divs and their independent backgrounds */
    #thing1 { 
              position:absolute;
              top:0;
              left:0;
              width:100%;
              height:100%;
              z-index:1000;           
              background: blue;
  }
  #thing2 {   
              position:absolute;
              top:0;
              left:0;
              width:100%;
              height:100%;
              z-index:1000;           
              background: red;
  }
  #thing3 {   
              position:absolute;
              top:0;
              left:0;
              width:100%;
              height:100%;
              z-index:1000;           
              background: green;
  }
  /* Centering the text */
  #text {
      width: 100px;
      height: 100px;
      margin: auto;
      position: absolute;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
  }
  </code></pre>