Translate3D overlaps absolute position elements

I have a navbar with an absolute position and an mage slider. I want to animate the image transition with translate3d/translateX the image ends up overlapping my navigation bar.

Quick example: https://jsfiddle.net/tqu0n4za/

What's a good way to keep the absolute positioning but push the navigation bar in front of the image slider?

My navbar html:

<div id="navbar">
        <a id="branding" href="index.html">Hi</a>
        <img id="navbar-menu-image" src="..\Images\Menu-Icon-White.svg" alt="Menu_Icon.svg"/>
        <!-- Navigation Bar -->
        <nav>
            <ul>
                <li>
                    <a href="index.html" id='current'>Home</a>
                </li>

                <li>
                    <a href='#'>About</a>
                </li>

                <li>
                    <a href='#'>Contact</a>
                </li>

                <li>
                    <a href='#'>CV</a>
                </li>
            </ul>
        </nav>
    </div>

My navbar css:

#navbar
{
    position: absolute;
    width: 100%;
    transition: 0.2s ease;
}

My image slider html:

<div id="image-slider">
    <img class="image-slider-images" src="..\Images\Wallpaper1.jpeg"/>
    <img class="image-slider-images" src="..\Images\Wallpaper2.jpeg"/>
    <img class="image-slider-images" src="..\Images\Wallpaper3.jpeg"/>
</div>

My image slider css:

.image-slider-images
{
    width: 1920px;
    transform: translate3d(-1000px, 0px, 0px);
    height: 800px;
}

z-index: 1;

In my navbar css fixed my issue.

This is what my css looks like now:

#navbar
{
    position: absolute;
    width: 100%;
    z-index: 1;
    transition: 0.2s ease;
}

Also, updated jsfiddle: https://jsfiddle.net/tqu0n4za/1/