使用javascript将图像覆盖到另一个图像上

下面的代码我在fiddle中尝试过，但当我在桌面上实际使用它时，它似乎根本不起作用。 尝试使用javascript将图像覆盖在主图像上。 我想我在参考方面出了点问题。 一点点帮助将不胜感激

代码：

div{
位置：绝对位置；
}
#主{
宽度：256px；
高度：256px；
}
#覆盖层{
位置：绝对位置；
高度：100px；
宽度：100px；
排名：0；
左：0；
显示：无；
}
.过度{
位置：绝对位置；
高度：100px；
宽度：100px；
底部：0；
右：0；
显示：无；
}
$（文档）.ready（函数（）{
$（“#main”）.mouseenter（函数（）{
$（“#覆盖”）.show（）；
});
$（“#main”）.mouseleave（函数（）{
$（“#覆盖”）.hide（）；
});
});
$（文档）.ready（函数（）{
$（“#main”）.mouseenter（函数（）{
$（“#”）.show（）；
});
$（“#main”）.mouseleave（函数（）{
$（“#overly”）.hide（）；
});
});

尝试将z索引属性添加到两个div的样式中。这应该允许你把一个放在另一个上面。例如：

  #main {   
            width:256px;
            height:256px;
            z-index: 0;
        }

        #overlay {
            position:absolute;
            height:100px;
            width:100px;
            top:0;
            left:0; 
            display:none;
            z-index: 1;
        }

        .overly {
            position:absolute;
            height:100px;
            width:100px;
            bottom:0;
            right:0; 
            display:none;
            z-index: 2;    
        }

---

有关此属性的详细信息，请参阅Z-Index属性上的W3Schools页。

您到底需要什么？为什么有两次相同的代码

document.ready（…

？我需要它来显示图像库中每个图像的信息。如果我试图为图像库实现上述脚本，那么指定一次的z索引就足够了，或者我必须为每个图像指定一次吗？@arpymastro一次就够了。只需记住可能需要在两者之间添加的其他内容，所以请保留叠加和叠加z指数高；可能分别为99和100。

  #main {   
            width:256px;
            height:256px;
            z-index: 0;
        }

        #overlay {
            position:absolute;
            height:100px;
            width:100px;
            top:0;
            left:0; 
            display:none;
            z-index: 1;
        }

        .overly {
            position:absolute;
            height:100px;
            width:100px;
            bottom:0;
            right:0; 
            display:none;
            z-index: 2;    
        }