如何将多个图像直接叠加在一起？

Question

我正在尝试创建一个交互式过滤的地图.基本上我有一个背景图像和一些不同的复选框,导致图像的外观.如果您只勾选一个复选框,则它可以正常工作 - 图像只显示在背景图像上.但是,如果您检查多个图像,我设置的其他图像过滤器只会出现在首先检查的任何过滤器图像下方.理想情况下,图像可以叠加在彼此之上,因此它们可以立即在地图上并列显示.

如果不清楚,我道歉 - 我对编码很陌生.这是jsfiddle所以你可以看到我在说什么:http://jsfiddle.net/klgraywill/Ddnuh/851/

 <ul class="results">
    <li class="spaces"><div style="position:absolute top: 0px; left: 100px"><img src="http://i.imgur.com/hh0IBC2.png" style="width:804px;height:356px"/></div></li>
    <li class="elements"><div style="position:absolute top: 0px; left: 100px"><img src="http://i.imgur.com/qsJuERK.png" style="width:804px;height:356px"/></div></li>
    <li class="silence"><img src="http://i.imgur.com/KMsmbvf.png" alt="silence" style="width:804px;height:356px""position: relative; top: 0px; left: 100px"/></li>
    <li class="pollution"><img src="http://i.imgur.com/Wjlj4JI.png" alt="polution" style="width:804px;height:356px""position: relative; top: 0px; left: 100px"/></li>
    <li class="active"><img src="http://i.imgur.com/0AF16WH.png" alt="active" style="width:804px;height:356px""position: relative; top: 0px; left: 100px"/></li>
</ul>

Answer 1

您需要absolute定位li包含内部的主图像ul,也通过设置top与left您的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*/
}

请注意,如果您已将位置值应用于其他元素static,则还可以通过设置它来控制它相对于其父元素显示的图层.z-index