How to get image to scroll behind navbar

Question

I have a web page with a navbar fixed at the top and the rest of the page should scroll up beneath the navbar. Most of the elements do scroll behind it. There are three images side by side. The two outside images (img 1 & img 3) scroll underneath the navbar as they should, but the central image (img 2) does not. It scrolls above the navbar. I think it has something to do with it being position absolute, but how can I get this one image to behave like everything else on the page? If I remove the position absolute the image no longer appears in line with the others. If I add a z-index of 1 it still goes over the navbar, despite the navbar having a z-index of 300. If I give the image a z-index of -1 it disappears altogether. I have tried adding different z-index values to different elements but cannot find a combination that works.

Here is my relevant css:

.navigate{
    overflow: hidden;
    top: 0;
    width: 100%;
    position: fixed;
}

    .toggle,
    [id^=drop] {
        display: none;
    }


    nav { 
        margin:0;
        padding: 0;
        background-color: #ffffff;
        z-index: 300;
    }

    nav:after {
        content:"";
        display:table;
        clear:both;
    }
    .container{
        width: 100%;
        margin-top: 70px; 
    }

    .spread1{
        display: inline-block;
        width: 100%;
        padding: 20px 0px;
        background-color: #0555bd;
        color: #ffffff;
    }
    .imgHolder{
        width:60%;
        margin: auto;
    }
    .img1{
        display: block;
        width: 27%;
        left: 0;
        right: 0 ;
        float: left;
        }
    .img2{
        position: absolute;
        width: 25%;
        display: block;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .img3{
        width: 27%;
        display: block;
        left: 0;
        right: 0 ;
        float: right;
        }

and here is the HTML:

<div class="navigate">      
   <nav>
        <div id="logo"><img src="images/logo.png" alt="AMD logo"></div>

        <label for="drop" class="toggle">Menu</label>
        <input type="checkbox" id="drop" />
            <ul class="menu">
                <li><a href="index.php">Home</a></li>
                <li> <a href="about.php">About</a></li>
                     <li><a href="contact.php">Contact</a></li>
               </ul>
        </nav>
      </div>
<div class="container">
    <div class="spread1">
<div class="imgHolder">
    <img class="img1" src="images/image1.jpg" alt="img1" />
    <img class="img2" src="images/image2.jpg" alt="img 2" />
    <img class="img3" src="images/image3" alt="img 3" />

</div>
</div>
</div>

Answer 1

You must go up the tree and find the level where the ancestor of <nav> is a sibling of img2's ancestor. Then apply a higher z-index value to <nav>s ancestor which happens to be div.navigate which has z-index:300 now. See demo below.

.navigate{
    overflow: hidden;
    top: 0;
    width: 100%;
    position: fixed;
    /* FIX */
    z-index:300;
}

Also, I had to add 2 rulesets to .spread1 because the OP was not scrolling. These 2 changes are not a requirement of solution, it's just here to demonstrate that the image scrolls under <nav>

   .spread1{
        display: inline-block;
        width: 100%;
        padding: 20px 0px;
        background-color: #0555bd;
        color: #ffffff;
        /* Added to test scroll */
        overflow-y:scroll;
        height:100vh;
    }

Demo

.navigate{
    overflow: hidden;
    top: 0;
    width: 100%;
    position: fixed;
    /* FIX */
    z-index:300;
}

    .toggle,
    [id^=drop] {
        display: none;
    }


    nav { 
        margin:0;
        padding: 0;
        background-color: #ffffff;
        z-index: 300;
    }

    nav:after {
        content:"";
        display:table;
        clear:both;
    }
    .container{
        width: 100%;
        margin-top: 70px; 
    }

    .spread1{
        display: inline-block;
        width: 100%;
        padding: 20px 0px;
        background-color: #0555bd;
        color: #ffffff;
        /* Added to test scroll */
        overflow-y:scroll;
        height:100vh;
    }
    .imgHolder{
        width:60%;
        margin: auto;

    }
    .img1{
        display: block;
        width: 27%;
        left: 0;
        right: 0 ;
        float: left;
        }
    .img2{
        position: absolute;
        width: 25%;
        display: block;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .img3{
        width: 27%;
        display: block;
        left: 0;
        right: 0 ;
        float: right;
        }

<div class="navigate">      
   <nav>
        <div id="logo"><img src="images/logo.png" alt="AMD logo"></div>

        <label for="drop" class="toggle">Menu</label>
        <input type="checkbox" id="drop" />
            <ul class="menu">
                <li><a href="index.php">Home</a></li>
                <li> <a href="about.php">About</a></li>
                     <li><a href="contact.php">Contact</a></li>
               </ul>
        </nav>
      </div>
<div class="container">
    <div class="spread1">
<div class="imgHolder">
    <img class="img1" src="http://placehold.it/50x50/000/fff?text=1'" alt="img1" />
    <img class="img2" src='http://placehold.it/50x50/0ff/000?text=2' alt="img 2" />
    <img class="img3" src="http://placehold.it/50x50/83d800/000?text=3" alt="img 3" />

</div>
</div>
</div>