javascript - 如何将多个图像直接堆叠在一起？

Question

我正在尝试创建一个交互式过滤 map 。基本上我有一个背景图像和一些导致图像外观的不同复选框。如果你只勾选一个复选框，它工作正常 - 图像只是出现在背景图像上。但是，如果您检查多个图像，我设置的其他图像过滤器将出现在首先检查的任何过滤器图像的下方。理想情况下，图像可以相互叠加，因此可以同时看到它们并列在 map 上。

如果不清楚，我深表歉意 - 我是编码新手。这是 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 和你的 li 的 left 为零，它们将层叠在彼此之上。

Demo Fiddle

只需将您的 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 来控制它相对于其父元素出现的层。