Can you change z-index with JS in IE8

Question

Very simple example: http://jsbin.com/ohude

Click button1, the 'hello2' text p should change z-index to 89. Click button2, the z-index should change yet again. This is obvious in firebug. But it doesn't do jack in IE8.

Can someone confirm?

Thanks.

Answer 1

I don't have IE8 and do not know jQuery code.

Were you trying to change the text viewed, or only the z-index? If the z-index AND the text viewed, it was a no-go in Safari.

For my test I altered your original jQuery-styled functions to:

1. alert to your original change (note that style.zIndex, rather than z-index); and
2. then changed the text nodeValue to reflect the z-index change.

At first, I change your css to css('zIndex','89') to see if that altered the results. Either way css('zIndex'...) or css('z-index'...), worked for me.

As I said, I don't know jQuery. But after testing the following snippet in IE8, if it doesn't work, try changing the css arg to 'zIndex', just for grins.

TEST:

$('#click').click(function () {
        $('#hello').css('z-index','89');
        var pid = document.getElementById('hello');
        alert('pid.style.zIndex: ' + pid.style.zIndex);
        pid.firstChild.nodeValue = "Hello2 " + pid.style.zIndex;
    }); 

  $('#click2').click(function () {
        $('#hello').css('z-index','10');
        var pid = document.getElementById('hello');
        alert('pid.style.zIndex: ' + pid.style.zIndex);
        pid.firstChild.nodeValue = "Hello2 " + pid.style.zIndex;
    }); 


});

Sorry to mess up your JQuery code. :D

Answer 2

The Elements that you're trying to set z-index on in your test page don't have CSS "position" set, so changing the z-index won't actually work.

Adding position:relative; or position:absolute; CSS properties should allow you to set their z-indixes.