title: fixed text on multiple section with parallax effect
body: <p>I have 4 sections and all of them have a background image. The problem is that each section has some text on it in the middle. They are supposed to be fixed i.e when we scroll, the section below the first section should overlap the section above it as well as the text on it.</p>
  
  <p>I have used position fixed for ext but only the first section text is visible .</p>
  
  <p>The HTML</p>
  
  <pre><code>&lt;div class="site-body"&gt;
              &lt;section id="section1"&gt;
                  &lt;div class="section-text1"&gt;
                      Section 1
                  &lt;/div&gt;
              &lt;/section&gt;
              &lt;section id="section2"&gt;
                  &lt;div class="section-text2"&gt;
                      Section 2
                  &lt;/div&gt;
              &lt;/section&gt;
              &lt;section id="section3"&gt;
                  &lt;div class="section-text3"&gt;
                      Section 3
                  &lt;/div&gt;
              &lt;/section&gt;
              &lt;section id="section4"&gt;
                  &lt;div class="section-text4"&gt;
                      Section 4
                  &lt;/div&gt;
              &lt;/section&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>.page-wrapper .site-body #section1 {
  position: relative;
  width: 1024px;
  height: 100%;
  background-color: red;
  background: url(../images/section1.jpg) no-repeat fixed;
  background-position: center center;
  z-index: 2000;
  }
  .page-wrapper .site-body #section1 .section-text1 {
  position: fixed;
  width: 300px;
  margin: 0 auto;
  padding-top: 100px;
  background: #000000;
  }
  .page-wrapper .site-body #section2 {
  position: relative;
  width: 1024px;
  height: 100%;
  background-color: green;
  background: url(../images/section2.jpg) no-repeat fixed;
  background-position: center center;
  z-index: 3000;
  }
  .page-wrapper .site-body #section2 .section-text2 {
  position: fixed;
  width: 300px;
  margin: 0 auto;
  padding-top: 100px;
  background: #000000;
  }
  .page-wrapper .site-body #section3 {
  position: relative;
  width: 1024px;
  height: 100%;
  background-color: #ffff00;
  background: url(../images/section3.jpg) no-repeat fixed;
  background-position: center center;
  z-index: 4000;
  }
  .page-wrapper .site-body #section3 .section-text3 {
  position: fixed;
  width: 300px;
  margin: 0 auto;
  padding-top: 100px;
  background: #000000;
  }
  .page-wrapper .site-body #section4 {
  position: relative;
  width: 1024px;
  height: 100%;
  background-color: darkblue;
  background: url(../images/section4.jpg) no-repeat fixed;
  background-position: center center;
  z-index: 5000;
  }
  .page-wrapper .site-body #section4 .section-text4 {
  position: fixed;
  width: 300px;
  margin: 0 auto;
  padding-top: 100px;
  background: #000000;
  }
  </code></pre>