如何设置元素的 z-Index？JQuery、Javascript、CSS、HTML

Question

已经尝试了几个小时，但似乎无法弄清楚为什么调整 z-index 不会实时影响圆圈。

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);

这是 HTML 布局：

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

初始 CSS

.clearCircle {
position: absolute;
height: 0;
width: 0;

}

无论我尝试过什么，blackCircle 总是在前面，并且代码没有抛出任何错误。

在此先感谢您的帮助

Answer 1

尝试这个：

HTML - 我添加了一些彩色占位符圆圈以帮助进行故障排除：

<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-index 从 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-index：

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