如何设置元素的 z-Index？JQuery、Javascript、CSS、HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29268341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I set the z-Index of my element? JQuery, Javascript, CSS, HTML
提问by Luminary Promotions
Been trying for hours, but can't seem to figure out why adjusting the z-index does not affect the circles in realtime.
已经尝试了几个小时，但似乎无法弄清楚为什么调整 z-index 不会实时影响圆圈。
Javascript/Jquery:
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:
这是 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">
Inital CSS
初始 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.
无论我尝试过什么，blackCircle 总是在前面，并且代码没有抛出任何错误。
Thanks in advance for any help
在此先感谢您的帮助
采纳答案by Benjamin Ray
Try this:
试试这个：
HTML- I added some coloured placeholder circles to help troubleshooting:
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- 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.
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- Increased initial size so you can see the black image:
CSS- 增加初始大小，以便您可以看到黑色图像：
.clearCircle {
position:absolute;
height:50;
width:50;
}
Demo- You'll see that the images respect the z-index:
演示- 您会看到图像遵循 z-index：
回答by skooliano
It isn't completely clear to me what your trying to accomplish but I think the "why" to your question basically boils down to browser stacking context for z-index and when z-index actually gets applied using your jquery script.
我并不完全清楚您想要完成什么，但我认为您的问题的“为什么”基本上归结为 z-index 的浏览器堆栈上下文以及何时使用您的 jquery 脚本实际应用 z-index。
When you set an elements position but do not define the z-index value, then z-index is interpreted by the browser in terms of the order of the elements appearance in the DOM. Elements loaded last, will display above elements that preceded it.'
当您设置元素位置但未定义 z-index 值时，浏览器会根据元素在 DOM 中出现的顺序来解释 z-index。最后加载的元素将显示在它之前的元素之上。
Here is an example of what I mean: https://jsfiddle.net/pmpg0zah/
这是我的意思的一个例子：https: //jsfiddle.net/pmpg0zah/
Here is a detailed explanation of z-index and how it works: http://timkadlec.com/2008/01/detailed-look-at-stacking-in-css/
以下是 z-index 及其工作原理的详细说明：http: //timkadlec.com/2008/01/detailed-look-at-stacking-in-css/
jQuery runs after the DOM is loaded so thats why you see the black circle appear on top initially and then go away once the green circle is updated.
jQuery 在 DOM 加载后运行，这就是为什么您看到黑色圆圈最初出现在顶部，然后在绿色圆圈更新后消失。
If you want it to appear as if it is rendering in real time, then you need to reverse the img elements order like so:
如果您希望它看起来好像是实时渲染，那么您需要像这样反转 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">
Forked and updated your fiddle here: http://jsfiddle.net/uyyxcxkg/1/
在这里分叉并更新你的小提琴：http: //jsfiddle.net/uyyxcxkg/1/
