I have a div overlay with a low z-index value. But even when i apply higher z-index values to my other content the overlay is always on top, when all i want is for it to be over my backgrounds. 

Here's my markup:

```css
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: white;
}

body {
  font-family: 'Open Sans', serif;

}

.section {
  /* the imp  ortant one*/
  /*    background-attachment: fixed;*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  z-index: 15;
}

#section1 {
  background-image: url("../images/main_background.png");
}

#section2 {
  background-image: url("../images/auction_background.png");
}

#section3 {
  background-image: url("../images/convention_background.png");
}

#section4 {
  background-image: url("../images/exhibition_background.png")
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.8);
}

.topbar {
  position: fixed;
  display: flex;
  justify-content: flex-end;
  z-index: 15;
  width: 100%;
}

.social-icons span {
  display: inline-block;
  position: relative;
  bottom: 1em;
}

.social-icons * {
  margin-left: 0.5em
}

.social-icons {
  margin: 5em;
}

.social-icons li {
  display: inline-block;
}

.social-icons svg {
  fill: rgba( 255, 255, 255, 0.7);
  width: 50px;
}

.logo {
  /*    margin: 10em;*/
  z-index: 13;
  width: 100%;
}

.logo img {
  display: block;
  width: 70em;
  margin: 0 auto;
  margin-top: 10em;
}

.coming-soon {
  z-index: 15;
  font-size: 5rem;
  text-align: center;
  margin-top: 1em
}

.coming {
  font-weight: lighter;
}

.soon {
  font-weight: bolder;
}

.keep {
  text-align: center;
  margin-top: 1em;
}

.text-block {
  width: 50em;
  margin-left: 25em;
  margin-top: 15em;
}

.title {
  font-size: 5rem;
}

.text-block p {
  margin-top: 1em;
  font-size: 2rem;
  font-weight: 100;
}

.text-block span {
  font-weight: 900;
}

.email-input {
  height: 4em;
  width: 30em;
  border-color: white;
  /*    background: black;*/
  border-radius: 20em;
  margin: 0 auto;
}

.navigation {
  position: fixed;
  width: 100%;
}

.email-input input {
  width: inherit;
  height: inherit;
  text-align: center;
  border-radius: 20em;
  background-color: transparent;
```

```html
<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <div class="topbar">
    <ul class="social-icons">
      <span>Find us on</span>
      <li>

        <a class="icons" href="#">
          <svg version="1.1" id="Facebook_w_x2F__circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
              <path d="M10,0.4c-5.302,0-9.6,4.298-9.6,9.6s4.298,9.6,9.6,9.6s9.6-4.298,9.6-9.6S15.302,0.4,10,0.4z M12.274,7.034h-1.443
                c-0.171,0-0.361,0.225-0.361,0.524V8.6h1.805l-0.273,1.486H10.47v4.461H8.767v-4.461H7.222V8.6h1.545V7.726
                    c0-1.254,0.87-2.273,2.064-2.273h1.443V7.034z"/>
            </svg></a>
      </li>
      <li>
        <a class="icons" href="#">
          <svg id="Instagram_w_circle" data-name="Instagram w/circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.19995 19.19995"><title>instagram-with-circle</title><path d="M13.89777,7.05115a1.65591,1.65591,0,0,0-.94891-0.94891,2.76589,2.76589,0,0,0-.92841-0.17218C11.49316,5.906,11.33508,5.90094,10,5.90094S8.50684,5.906,7.97955,5.93005a2.76589,2.76589,0,0,0-.92841.17218,1.65591,1.65591,0,0,0-.94891.94891,2.76589,2.76589,0,0,0-.17218.92841C5.906,8.50684,5.90094,8.665,5.90094,10s0.00507,1.49316.02911,2.02045a2.76553,2.76553,0,0,0,.17218.92841,1.65591,1.65591,0,0,0,.94891.94891,2.76589,2.76589,0,0,0,.92841.17218c0.52716,0.024.6853,0.02911,2.02045,0.02911s1.49329-.00507,2.02045-0.02911a2.76589,2.76589,0,0,0,.92841-0.17218,1.65591,1.65591,0,0,0,.94891-0.94891,2.76553,2.76553,0,0,0,.17218-0.92841c0.024-.52728.02911-0.68536,0.02911-2.02045S14.094,8.50684,14.06995,7.97955A2.76589,2.76589,0,0,0,13.89777,7.05115ZM10,12.56757A2.56757,2.56757,0,1,1,12.56757,10,2.56756,2.56756,0,0,1,10,12.56757ZM12.669,7.931a0.6,0.6,0,1,1,.6-0.6A0.6,0.6,0,0,1,12.669,7.931Z" transform="translate(-0.40002 -0.40002)"/><circle cx="9.59998" cy="9.59998" r="1.66669"/><path d="M10,0.4A9.6,9.6,0,1,0,19.6,10,9.59995,9.59995,0,0,0,10,.4Zm4.96991,11.6615a3.67039,3.67039,0,0,1-.23242,1.21368,2.55612,2.55612,0,0,1-1.46228,1.46228,3.67039,3.67039,0,0,1-1.21368.23242C11.5282,14.99426,11.35791,15,10,15s-1.5282-.00574-2.06152-0.03009a3.67039,3.67039,0,0,1-1.21368-.23242,2.55612,2.55612,0,0,1-1.46228-1.46228,3.67039,3.67039,0,0,1-.23242-1.21368C5.00574,11.5282,5,11.35791,5,10s0.00574-1.5282.03009-2.06152a3.67039,3.67039,0,0,1,.23242-1.21368A2.55612,2.55612,0,0,1,6.72479,5.26251a3.67039,3.67039,0,0,1,1.21368-.23242C8.4718,5.00574,8.64209,5,10,5s1.5282,0.00574,2.06152.03009a3.67039,3.67039,0,0,1,1.21368.23242,2.55612,2.55612,0,0,1,1.46228,1.46228,3.67039,3.67039,0,0,1,.23242,1.21368C14.99426,8.4718,15,8.64209,15,10S14.99426,11.5282,14.96991,12.06152Z" transform="translate(-0.40002 -0.40002)"/></svg>
        </a>
      </li>
      <li>
        <a class="icons" href="#">
          <svg version="1.1" id="Twitter_w_x2F__circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
              <path d="M10,0.4c-5.302,0-9.6,4.298-9.6,9.6s4.298,9.6,9.6,9.6s9.6-4.298,9.6-9.6S15.302,0.4,10,0.4z M13.905,8.264
                      c0.004,0.082,0.005,0.164,0.005,0.244c0,2.5-1.901,5.381-5.379,5.381c-1.068,0-2.062-0.312-2.898-0.85
                       c0.147,0.018,0.298,0.025,0.451,0.025c0.886,0,1.701-0.301,2.348-0.809c-0.827-0.016-1.525-0.562-1.766-1.312
                        c0.115,0.021,0.233,0.033,0.355,0.033c0.172,0,0.34-0.023,0.498-0.066c-0.865-0.174-1.517-0.938-1.517-1.854V9.033
                         C6.257,9.174,6.549,9.26,6.859,9.27C6.351,8.93,6.018,8.352,6.018,7.695c0-0.346,0.093-0.672,0.256-0.951
                          c0.933,1.144,2.325,1.896,3.897,1.977c-0.033-0.139-0.049-0.283-0.049-0.432c0-1.043,0.846-1.891,1.891-1.891
                           c0.543,0,1.035,0.23,1.38,0.598c0.431-0.086,0.835-0.242,1.2-0.459c-0.141,0.441-0.44,0.812-0.831,1.047
                            c0.383-0.047,0.747-0.148,1.086-0.299C14.595,7.664,14.274,7.998,13.905,8.264z"/>
          </svg>
        </a>
      </li>
    </ul>
  </div>

  <div id="pagepiling">
    <!--        <div class="overlay"></div>-->
    <div class="section" id="section1">

      <div class="logo">
        <img src="./images/auction_logo.png" alt="">
      </div>

      <div class="coming-soon">
        <span class="coming">Coming</span> <span class="soon">Soon</span>
      </div>
      <div class="keep"><span>Keep in touch</span></div>

    </div>
    <div class="section" id="section2">
      <div class="text-block">
        <h1 class="title">Auction</h1>
        <p><span>A full service dealer </span>and public auto auction.Experience the thrill of bidding and also tak advantage of available bargains on your next vehicle purchase</p>
      </div>
    </div>
    <div class="section" id="section3">
      <div class="text-block">
        <h1 class="title">
          Convention
        </h1>
        <p>
          <span> A dynamic platform</span> for Business to Business and Business to Consumer relations, featuring the largest gathering of stakeholders in the automotive industry in Abuja.
        </p>
      </div>
    </div>
    <div class="section" id="section4">
      <div class="text-block">
        <h1 class="title">
          Exhibition
        </h1>
        <p>
          <span> A wide range</span> of exhibitors from all sectors of the automotive industry displaying products and services for direct marketing and service engagement opportunities
        </p>
      </div>
    </div>
  </div>

</body>

</html>
```

I'm using a java script library - pagepiling.js although i can't see how this could influence my markup. Here's the jsfiddle [JsFiddle](https://jsfiddle.net/j46kzfv2/4/)