Luminary Promotions Luminary Promotions - 6 months ago 45
CSS Question

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

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


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


Try this:

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

<img class="clearCircle" id="greenCircle" src="" alt="Clear circle">
<img class="clearCircle" id="blackCircle" src="" 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");
        width: '200%',
        height: '100%',
        left: '-50%',
        top: 0
    }, lockTime);

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

.clearCircle {

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