title: My sticky nav has the highest z-index, but is still getting trespassed. Can any of you see my problem?
body: <p>I'm making a project with a big image at the top of the page, followed by a sticky nav.</p>
  <p>The info following the nav keeps trespassing!</p>
  <p>I have been trying all sorts of things, making the other sections after it have a lower or negative z-index numbers, as well as trying to set the opacity to 99 for the following modules because I read that opacity changes the stacking order.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*Navigation*/
  
  navigation {
    display: block;
    box-shadow: 0px 10px 22px #326559;
  }
  
  .z {
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 500;
  }
  
  nav {
    display: block;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
  }
  
  nav img {
    max-width: 9vw;
  }
  
  
  /*Annonce*/
  
  .annonce {
    position: relative;
    z-index: -1;
    opacity: .99;
  }
  
  .annonce p {
    margin-top: 50px;
    margin-bottom: 50px;
    padding: 10px;
  }
  
  .annonce img {
    padding-bottom: 50px;
  }
  
  
  /*Location Gallery*/
  
  hr {
    background-color: #326557;
    height: 3px;
    margin-bottom: 75px;
  }
  
  location-card {
    display: block;
    border: 2px solid #326557;
    margin-bottom: 50px;
    background-color: #e5fbe2;
    padding: 20px;
    position: relative;
    z-index: -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;navigation class="z"&gt;
    &lt;inner-column&gt;
      &lt;nav&gt;
        &lt;a href="#" class="icon"&gt;
          &lt;img src="images/bla.png"&gt;
        &lt;/a&gt;
        &lt;a href="#"&gt;Sign in&lt;/a&gt;
      &lt;/nav&gt;
    &lt;/inner-column&gt;
  &lt;/navigation&gt;
  
  
  &lt;main&gt;
  
    &lt;section class="annonce"&gt;
      &lt;inner-column&gt;
        &lt;p&gt;Bla bla bla!&lt;/p&gt;
      &lt;/inner-column&gt;
  
      &lt;picture&gt;
        &lt;img src="images/image1.jpg"&gt;
      &lt;/picture&gt;
    &lt;/section&gt;
  
    &lt;?php include('locationCards.php'); ?&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/P5grb.jpg" rel="nofollow noreferrer">Working on my sticky</a></p>
  <p>I'm going to include my html for the nav.
  And a little bit of what comes after that.</p>
  <p>I'm including some CSS for both the nav and what comes after, in case another more skilled person can see what my issue is.</p>
  <p>Thanks so much</p>