jquery & CSS - Z-index

Question

In below jquery function z-index is not working in IE7, Please help me

<script>
$(function() {
    $('span').hover(function() {

        $(this).stop().css({                      
            'float': 'left',
        'z-index':'15'
        }).animate({
            marginTop: '0px',
            marginLeft: '0px',            
            width: '200px',
            height: '125px',
            padding: '0px'

        }, 700, 'swing');


    }, function() {

        $(this).stop().css({            
            'border': '0px',
            'z-index':'10'
        }).fadeIn('slow').animate({
            marginTop: '0px',
            marginLeft: '0px',            
            width: '40px',
            height: '13px'            
        }, 700, 'swing');


    });
});

</script>

Help much appreciated. I am new to jquery.

Answer 1

Is it only in IE7?

It looks like the issue is with the float:left in the first function.

As far as I know, z-index only works on positioned elements. Floats are not positioned and so cannot accept z-index. See http://reference.sitepoint.com/css/z-index

If possible, remove the float and position the span another way.

Answer 2

See http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ for an example of this bug. You have to give the parent element a higher z-index for it to work.