Make html element only visible in one section of page

Question

im looking for this problem the last 2 days but didnt find any solution. I prepared this jsFiddle for you to show you my exact problem.

How do I make the image only visible for section 2? Like it should scroll behind the layer of section 1. It works from section 2 into section 3 but i cant find a solution to place it behind section 1.

JsFiddle Demo

h2 {
  margin: 0;
}

/** Section 1 **/
.textbox {
  position: absolute;
  z-index: 1;
  text-align: center;
  top: 300px;
  left: 0%;
  right: 0%;
}

.textboxcontent {
  position: relative;
  margin-bottom: 25px;
  font-family: 'Roboto', sans-serif;
  padding-left: 15px;
  padding-right: 15px;
  opacity: 0.8;
  font-weight: normal;
}
.background-video {
   overflow: hidden;

}
.background-video video {
  height: 100%;
  width: 177.77777778vh;
  min-width: 100%;
  min-height: 56.25vw;
  object-fit: cover;
  opacity: 0.3;
}


/** Section 2 **/
.relative {
  position: relative;
  background-color: orange;
  margin-top: -4px;
}

.frame {
  width: 400px;
  margin: 0 auto;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.section2 {
  min-height: 50vh;
}

/** Section 3 **/
.relative2 {
  position: relative;
  background-color: yellow;
}
.section3 {
  min-height: 50vh;
}

/** Section 3 **/
.relative3 {
  position: relative;
  background-color: purple;
}
.section4 {
  min-height: 50vh;
}

/** Section 4 **/
.relative4 {
  position: relative;
  background-color: pink;
}
.section5 {
  min-height: 50vh;
}

.animation {
  width: 200px;
  height: 150px;
  position: fixed;
  right: 0;
  top: 300px;
  z-index: 0;
}

.animation img {
  width: 100%;
  height: 100%;
}

<main>
  
  <div class="section1">
    <div class="background-video">
      <video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
    </div>
    <div class="textbox">
      <div class="textboxcontent"> 
        <h2>Welcome</h2>
      </div>
    </div>
  </div>
  
  
  <div class="relative">
    <div class="animation">
      <img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
    </div>
    <div class="frame">
      <div class="section2">
        <h2>Section 2</h2>
        <p>example text</p>
      </div>
    </div>
  </div>
  
    <div class="relative2">
    <div class="frame">
      <div class="section3">
        <h2>Section 3</h2>
        <p>example text</p>
      </div>
    </div>
  </div>
  
      <div class="relative3">
        <div class="frame">
          <div class="section4">
            <h2>Section 3</h2>
            <p>example text</p>
          </div>
        </div>
      </div>
  
  
        <div class="relative4">
        <div class="frame">
          <div class="section5">
            <h2>Section 4</h2>
            <p>example text</p>
          </div>
        </div>
      </div>
  
  
</main>

Answer 1

I added this CSS:

.section1 {
  position: relative;
  z-index: 100;
  background-color: lightgray;
}

No background on section1 allowed the element to be seen through div.section1

h2 {
  margin: 0;
}

.section1 {
  position: relative;
  z-index: 100;
  background-color: lightgray;
}

/** Section 1 **/
.textbox {
  position: absolute;
  z-index: 100;
  text-align: center;
  top: 300px;
  left: 0%;
  right: 0%;
}

.textboxcontent {
  position: relative;
  margin-bottom: 25px;
  font-family: 'Roboto', sans-serif;
  padding-left: 15px;
  padding-right: 15px;
  opacity: 0.8;
  font-weight: normal;
}
.background-video {
   overflow: hidden;

}
.background-video video {
  height: 100%;
  width: 177.77777778vh;
  min-width: 100%;
  min-height: 56.25vw;
  object-fit: cover;
  opacity: 0.3;
}


/** Section 2 **/
.relative {
  position: relative;
  background-color: orange;
  margin-top: -4px;
}

.frame {
  width: 400px;
  margin: 0 auto;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.section2 {
  min-height: 50vh;
}

/** Section 3 **/
.relative2 {
  position: relative;
  background-color: yellow;
}
.section3 {
  min-height: 50vh;
}

/** Section 3 **/
.relative3 {
  position: relative;
  background-color: purple;
}
.section4 {
  min-height: 50vh;
}

/** Section 4 **/
.relative4 {
  position: relative;
  background-color: pink;
}
.section5 {
  min-height: 50vh;
}

.animation {
  width: 200px;
  height: 150px;
  position: fixed;
  right: 0;
  top: 300px;
  z-index: 0;
}

.animation img {
  width: 100%;
  height: 100%;
}

<main>
  
  <div class="section1">
    <div class="background-video">
      <video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
    </div>
    <div class="textbox">
      <div class="textboxcontent"> 
        <h2>Welcome</h2>
      </div>
    </div>
  </div>
  
  
  <div class="relative">
    <div class="animation">
      <img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
    </div>
    <div class="frame">
      <div class="section2">
        <h2>Section 2</h2>
        <p>example text</p>
      </div>
    </div>
  </div>
  
    <div class="relative2">
    <div class="frame">
      <div class="section3">
        <h2>Section 3</h2>
        <p>example text</p>
      </div>
    </div>
  </div>
  
      <div class="relative3">
        <div class="frame">
          <div class="section4">
            <h2>Section 3</h2>
            <p>example text</p>
          </div>
        </div>
      </div>
  
  
        <div class="relative4">
        <div class="frame">
          <div class="section5">
            <h2>Section 4</h2>
            <p>example text</p>
          </div>
        </div>
      </div>
  
  
</main>

fiddle