All geek questions in one place

Jquery & CSS - Z-index

In the below jQuery, the z-index function does not work 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 evaluate. I am new to jquery.

+6
source share
2 answers

Is it only in IE7?

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

As far as I know, z-index only works with positioned elements. Float not located and therefore cannot accept z-index . See http://reference.sitepoint.com/css/z-index

If possible, remove the Float and place the span another way.

+5
source

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

+2
source

Source: https://habr.com/ru/post/889457/

More articles:


All Articles