如何设置元素的z索引?JQuery、Javascript、CSS、HTML

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

本文关键字：JQuery 索引 Javascript HTML CSS 何设置 设置 元素      更新时间：2023-09-26

已经尝试了几个小时，但似乎不明白为什么调整z索引不会实时影响圆圈。

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总是在前面，代码不会出错。

提前感谢的任何帮助

试试这个：

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索引从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/

我还不完全清楚你试图实现什么，但我认为你的问题的"为什么"基本上可以归结为z-index的浏览器堆栈上下文，以及何时使用jquery脚本实际应用z-index。

当您设置了元素位置但没有定义z索引值时，浏览器会根据元素在DOM中的出现顺序来解释z索引。最后加载的元素将显示在其前面的元素上方。’

下面是我的意思的一个例子：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/

相关文章：