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.

I went ahead and put one together for you: jsfiddle.net/WacfY. I would help but i dont have IE7 on this comp. It works in Chrome11. — Zach Lysobey
– Zach Lysobey, Commented May 31, 2011 at 15:06

Jason Gennaro · Accepted Answer · 2011-05-31 15:19:26Z

5

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.

answered May 31, 2011 at 15:19

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Liam · Accepted Answer · 2011-05-31 15:11:58Z

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.

answered May 31, 2011 at 15:11

Liam

9,88340 gold badges116 silver badges214 bronze badges

1 Comment

adamyonk Over a year ago

I think the parent element also has to have some sort of positioning, like position: relative.

Collectives™ on Stack Overflow

jquery & CSS - Z-index

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related