JQuery & CSS - Z-индекс

Question

В приведенной ниже функции jquery z-index не работает в IE7, пожалуйста, помогите мне

<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>

Помощь очень ценится.Я новичок в jquery.

Answer 1

Это только в IE7?

Похоже, проблема в float:left в первом function.

Насколько я знаю, z-index работает только с позиционированными элементами. Float s не расположены и поэтому не могут принять z-index. Смотри http://reference.sitepoint.com/css/z-index

Если возможно, удалите float и расположите span другим способом.

Answer 2

См. http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ для примера этой ошибки. Вы должны дать родительскому элементу более высокий z-индекс, чтобы он работал.