如何设置元素的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;

无论我尝试了什么，黑色圆圈总是在最前面，代码没有报错。

提前感谢任何帮助。

- Luminary Promotions

---

.clearCircle 的父元素是否为 position:relative？ - StackSlave

我将图像移动到主体的子级以进行调试。 - Luminary Promotions

你能在哪里发布一个fiddle或链接吗？代码看起来还不错 - 可能是与dom加载有关。 - Mia Sno

我刚刚创建了一个小测试，greenCircle 总是显示在 blackCircle 的前面。http://jsfiddle.net/kpumuecs/ - dippas

尝试制作一个Fiddle，但正如@dippas所说，它可以正常工作。但是当项目的其余部分就位时，我看到的并不是这样。 - Luminary Promotions

干扰来自于动画结束时的回调函数，我以为如果像回调函数一样通常地放置一个方法调用就可以了，但是我必须声明一个新的函数作为回调函数。我是CSharp的人，所以不习惯Web语言的小语法问题。 - Luminary Promotions

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/

- Benjamin Ray

---

我也可以创建一个可工作的 Fiddle，但该项目仍无法正常运行。我将尝试分解代码，直到找到干扰点。 - Luminary Promotions

是的，肯定有其他干扰因素。祝你好运。 - Benjamin Ray

干扰来自于动画结束时的回调函数，我以为如果像回调函数一样通常地放置方法调用，它会起作用，但我必须声明一个新函数作为回调函数。我是CSharp的人，所以不习惯Web语言的小语法问题。 - Luminary Promotions

是的，这些东西可能非常敏感。很高兴现在它能为您工作了。 - Benjamin Ray

Answer 2

我不完全清楚您想要实现什么，但我认为您的问题“为什么”基本上归结为浏览器z-index的堆叠上下文和在您的jquery脚本中何时应用z-index。当您设置元素的位置但未定义z-index值时，z-index将按DOM中元素出现的顺序由浏览器解释。最后加载的元素将显示在之前加载的元素上方。

这是一个例子：https://jsfiddle.net/pmpg0zah/ 这是关于z-index及其工作原理的详细说明：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">

我在这里fork了并更新了你的代码: http://jsfiddle.net/uyyxcxkg/1/

- skooliano