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

can you post a fiddle or link some where? code looks ok to me - maybe something with loading in dom. — Mia Sno
– 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.net/kpumuecs — dippas
– 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
– Luminary Promotions, Commented Mar 25, 2015 at 23:59

TheBlackBenzKid · Accepted Answer · 2016-11-30 05:47:06Z

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

edited Nov 30, 2016 at 5:47

TheBlackBenzKid

27.2k45 gold badges142 silver badges214 bronze badges

answered Mar 25, 2015 at 23:30

Benjamin Ray

1,8701 gold badge17 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Luminary Promotions Over a year ago

I could create a working Fiddle too, but the project still doesn't run properly. I will try breaking the code down until I find what is interfering

Benjamin Ray Over a year ago

Yes, something else must be interfering. Good luck.

Luminary Promotions Over a year ago

The interference came from a callback at the end of the animation, I thought if I placed a method call the usual way as the callback it would work, but I had to declare a new function as the callback. I'm a CSharp guy so not used to the small syntax issues of web languages.

Benjamin Ray Over a year ago

Yes, this stuff can be very sensitive. Glad it's working for you now.

skooliano · Accepted Answer · 2015-03-26 00:22:40Z

It isn't completely clear to me what your trying to accomplish 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.net/pmpg0zah/

Here is a detailed explanation of z-index and how it works: http://timkadlec.com/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.net/uyyxcxkg/1/

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related