Question

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!

Answer 1

Lower on the page, you have a div#content_container with a z-index of 10. So, you’ll need at least a z-index of 11 to have it appear on top.

Secondly, the issue is that the image within the div is failing to load. This means the div has no height or width.