Question

14

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

rated 0 times [ 15] [ 1] / answers: 1 / hits: 16308 / 9 Years ago, wed, march 25, 2015, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

pranavrorys

Add To Favorites

Follow

Total Points: 466

Total Questions: 87

Total Answers: 115

Location: Barbados

Member since Sun, Nov 27, 2022

2 Years ago

pranavrorys questions

1 'unsafe-eval' is not an allowed source of script

Fri, May 27, 22, 00:00, 2 Years ago

1 How do I run Hardhat with the --constructor-args parameter?

Thu, Oct 28, 21, 00:00, 3 Years ago

1 Task :react-native-webview:compileDebugJavaWithJavac FAILED

Sat, May 30, 20, 00:00, 4 Years ago

1 In React-Table, how to check/uncheck all checkboxes in a row or column

Tue, Mar 3, 20, 00:00, 4 Years ago

1 How to get value of jquery nice select

Fri, Dec 20, 19, 00:00, 5 Years ago

View All

answered 9 Years ago xochitl · Accepted Answer

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/