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

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

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

• javascript
• jquery
• css
• z-index

Share Improve this question Follow asked Mar 25, 2015 at 23:18 Luminary PromotionsLuminary Promotions 10511 gold badge11 silver badge55 bronze badges 6

• Is the parent of .clearCircle position:relative? – StackSlave Commented Mar 25, 2015 at 23:23
• I moved the images to children of the body for debugging – Luminary Promotions Commented Mar 25, 2015 at 23:28
• 1 can you post a fiddle or link some where? code looks ok to me - maybe something with loading in dom. – Mia Sno Commented Mar 25, 2015 at 23:29
• I just created a fiddle and the greenCircle always shows up in front of blackCircle jsfiddle/kpumuecs – dippas Commented Mar 25, 2015 at 23:31
• Tried making a Fiddle., but as @dippas said, it works fine. But thats not I see when the rest of the project is in place – Luminary Promotions Commented Mar 25, 2015 at 23:59

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

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/BenjaminRay/57ttjr2z/

It isn't pletely clear to me what your trying to acplish but I think the "why" to your question basically boils down to browser stacking context for z-index and when z-index actually gets applied using your jquery script.

When you set an elements position but do not define the z-index value, then z-index is interpreted by the browser in terms of the order of the elements appearance in the DOM. Elements loaded last, will display above elements that preceded it.'

Here is an example of what I mean: https://jsfiddle/pmpg0zah/

Here is a detailed explanation of z-index and how it works: http://timkadlec./2008/01/detailed-look-at-stacking-in-css/

jQuery runs after the DOM is loaded so thats why you see the black circle appear on top initially and then go away once the green circle is updated.

If you want it to appear as if it is rendering in real time, then you need to reverse the img elements order like so:

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

Forked and updated your fiddle here: http://jsfiddle/uyyxcxkg/1/