Div with position absolute and lower z-index is showing on top of a higher z-index(fixed position)

Question

Alright... I have a nav menu that when you scroll down past it, it changes to a fixed menu on top that accompanies the page.

But for some reason, I have a div on the page that has an absolute position and a lower z-index than the menu but it still shows up on top of the menu...

Here's the function that sets the menu to fixed past a certain point.

$(function(){
    var pos = $('#nav').offset().top;
    $(window).scroll(function(){
        if( $(window).scrollTop() > pos ) {
            $('#nav').parent().parent().css({position: 'fixed', top: '0px', background: '#fff', width: '100%', 'z-index': 9002, left:0});
        } else {
            $('#nav').parent().parent().css({position: 'static', top: '0px', background: 'none', width: '100%', 'z-index': 1});
        }
    });
});

This is the div that is showing on top when it shouldn't...

.header {
   position: relative;
   z-index: 1;
   margin: 0;
   padding: 0; }

Also, here you can see an example of it happening as you scroll down the page.

Answer 1

1. Apply a position:relative on <div id="page-content">
2. Change the z-index on <header class="site-header"> to 2