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，同时设置您{{1}的top和left如果为零，它们将叠加在一起。

Demo Fiddle

只需将您的CSS更改为：

li

请注意，如果您已将位置值应用于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*/ }以外的元素，则还可以通过设置z-index

来控制它相对于其父级显示的图层

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

1 个答案:

Demo Fiddle