Bringing Div in front of fade script
===

I've implemented a script that fades an image on scroll. 

This is it:


    <script type="text/javascript">
            // The social div 
        var $socialDiv,
            // The social div's height 
            socialDivHeight = 500,
            currentSocialDivHeight = socialDivHeight;
        
        
        $(document).ready(function() {
            $socialDiv = $('.social');
            $socialDiv.css({
                'background-image': 'url(http://a3.sphotos.ak.fbcdn.net/hphotos-ak-prn1/563655_324264884301748_471368753_n.jpg)',
                'background-repeat': 'no-repeat',
                'background-attachment': 'fixed',
               'background-size' : '110% auto',
                'height' : socialDivHeight + 'px',
                'margin-left' : '-50%',
                'margin-right' : '-50%',
                'margin-top': '200opx',
                
            });
        });
        
        
        $(window).scroll(function() { 
            //Get scroll position of window 
            var windowScroll = $(this).scrollTop(); 
            
            var newSocialDivHeight = Math.max(0, socialDivHeight - windowScroll);
            
            if (Math.abs(newSocialDivHeight - currentSocialDivHeight) < 1)
                return;
            
            $socialDiv.css({
                'opacity' : 1 - windowScroll / 400
            });
            
            currentSocialDivHeight = newSocialDivHeight;
        });
    </script>

However, I'm trying to place a div above this. And z-index isn't working.

My Div:


    <div style="position: absolute; top: 20px; left: 20px; z-index: 1;">
        <img src="http://images5.fanpop.com/image/photos/24600000/Hello-Kitty-Mving-Glittery-Dress-hello-kitty-24617449-320-310.gif" width="119" height="82" />
    </div>

My site:

http://cargocollective.com/btatest

If you look at the top right you'll see it.

So my question is; how do I bring it to the front?

Thanks!