How do I set the z-Index of my element? JQuery, Javascript, CSS, HTML

Question

Been trying for hours, but can't seem to figure out why adjusting the z-index does not affect the circles in realtime.

Javascript/Jquery:

var greenCircle = "#greenCircle";
var blackCircle = "#blackCircle";


$(greenCircle).css("z-index", "5");
$(blackCircle).css("z-index", "4");
$(greenCircle).animate({ width: '200%', height: '100%', left: '-50%', top: 0}, lockTime);

Here is the HTML layout:

<img class = "clearCircle" id = "greenCircle" src = "Resources/Background/GreenCircle.png" alt = "Clear circle">
<img class = "clearCircle" id = "blackCircle" src = "Resources/Background/BlackCircle.png" alt = "Clear circle">

Inital CSS

.clearCircle {
position: absolute;
height: 0;
width: 0;

}

No matter what I have tried, the blackCircle is always in front, and the code is throwing no errors.

Thanks in advance for any help

Answer 1

Try this:

HTML - I added some coloured placeholder circles to help troubleshooting:

<img class="clearCircle" id="greenCircle" src="http://placehold.it/200x200/66ff66" alt="Clear circle">
<img class="clearCircle" id="blackCircle" src="http://placehold.it/200x200/000000" alt="Clear circle">

JavaScript - I wrapped everything in jQuery document.ready(). If you change the z-index of the black image from 10 to 30, you will see it in front of the green image.

$(function () {
    var lockTime = 2000;
    var greenCircle = "#greenCircle";
    var blackCircle = "#blackCircle";

    $(greenCircle).css("z-index", "20");
    $(blackCircle).css("z-index", "10");
    $(greenCircle).animate({
        width: '200%',
        height: '100%',
        left: '-50%',
        top: 0
    }, lockTime);
});

CSS - Increased initial size so you can see the black image:

.clearCircle {
    position:absolute;
    height:50;
    width:50;
}

Demo - You'll see that the images respect the z-index:

http://jsfiddle.net/BenjaminRay/57ttjr2z/