如何设置元素的 z-Index? JQuery、Javascript、CSS、HTML
How do I set the z-Index of my element? JQuery, Javascript, CSS, HTML
已经尝试了几个小时,但似乎无法弄清楚为什么调整 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 总是在前面,而且代码没有抛出任何错误。
在此先感谢您的帮助
试试这个:
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;
}
Demo - 您会看到图像符合 z-index:
我不完全清楚你想要完成什么,但我认为 "why" 你的问题基本上归结为 z-index 的浏览器堆栈上下文以及 z-index 实际应用时使用您的 jquery 脚本。
当您设置元素位置但未定义 z-index 值时,浏览器会根据元素在 DOM 中出现的顺序来解释 z-index。最后加载的元素将显示在它之前的元素之上。'
这是我的意思的一个例子: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">
在此处分叉并更新了您的 fiddle:http://jsfiddle.net/uyyxcxkg/1/
已经尝试了几个小时,但似乎无法弄清楚为什么调整 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 总是在前面,而且代码没有抛出任何错误。
在此先感谢您的帮助
试试这个:
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;
}
Demo - 您会看到图像符合 z-index:
我不完全清楚你想要完成什么,但我认为 "why" 你的问题基本上归结为 z-index 的浏览器堆栈上下文以及 z-index 实际应用时使用您的 jquery 脚本。
当您设置元素位置但未定义 z-index 值时,浏览器会根据元素在 DOM 中出现的顺序来解释 z-index。最后加载的元素将显示在它之前的元素之上。'
这是我的意思的一个例子: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">
在此处分叉并更新了您的 fiddle:http://jsfiddle.net/uyyxcxkg/1/