我正在尝试创建一个交互式过滤 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>
最佳答案
您需要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
来控制它相对于其父元素出现的层。
关于javascript - 如何将多个图像直接堆叠在一起?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29692327/