Javascript 如何将多个图像直接堆叠在彼此的顶部？

我正在尝试创建一个交互式过滤地图。基本上，我有一个背景图像和一些不同的复选框，导致图像的外观。如果只勾选一个复选框，则效果良好-图像仅显示在背景图像上。但是，如果您检查多个图像，我设置的其他图像过滤器将显示在首先检查的过滤器图像的下方。理想情况下，这些图像可以叠加在一起，这样它们就可以同时在地图上并排出现

如果这不清楚，我很抱歉-我对编码是全新的。这是JSFIDLE，您可以看到我在说什么：

您需要将包含主

ul

中图像的

li

定位在

绝对
位置，同时将
li
的
顶部和
左侧设置为零，它们将彼此层叠

只需将CSS更改为：

body {
    background-image: url("http://i.imgur.com/6xNRfGi.png");
    background-size: 804px 356px;
    background-repeat: no-repeat;
    background-position: 0px 100px; 
}
.container {
    position: relative;
    width: 100%;
}
ul{
    position:relative; /* <-- anchor child li elements positions relative to this */
}
li{
    position:absolute; /* <--- position allows for 'layering' */
    top:0; /* position should start in the same top left corner of the parent ul*/
    left:0; /* position should start in the same top left corner of the parent ul*/
}

正文{
背景图像：url（“http://i.imgur.com/6xNRfGi.png");
背景尺寸：804px356px；
背景重复：无重复；
背景位置：0px 100px；
}
.集装箱{
位置：相对位置；
宽度：100%；
}
保险商实验室{
职位：relative；/*非常好用，太棒了！非常感谢！！我怀疑你正在做一些非常有趣的事情8）
body {
    background-image: url("http://i.imgur.com/6xNRfGi.png");
    background-size: 804px 356px;
    background-repeat: no-repeat;
    background-position: 0px 100px; 
}
.container {
    position: relative;
    width: 100%;
}
ul{
    position:relative; /* <-- anchor child li elements positions relative to this */
}
li{
    position:absolute; /* <--- position allows for 'layering' */
    top:0; /* position should start in the same top left corner of the parent ul*/
    left:0; /* position should start in the same top left corner of the parent ul*/
}