Geek Answers Handbook

How to set the z-index of my item? JQuery, Javascript, CSS, HTML

I worked for several hours, but I can’t understand why setting the z-index does not affect the circles in real time.

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 tried, blackCircle is always ahead, and the code does not cause errors.

Thank you in advance for your help.

+4
source share
2 answers

Try the following:

The HTML . I have added a few colored placeholders to help troubleshoot:

<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. jQuery document.ready(). z- 10 30, .

$(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. , :

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

. , z-:

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

+4

, , , "" z- z-index jquery script.

, z-index, z-index DOM. , , . '

, : https://jsfiddle.net/pmpg0zah/

z- , : http://timkadlec.com/2008/01/detailed-look-at-stacking-in-css/

jQuery DOM, , , , .

, , , img :

<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">

: http://jsfiddle.net/uyyxcxkg/1/

+3

More articles:


All Articles