如何将多张图片直接叠放在一起？

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>

- klg

---

我猜测你正在做一些非常有趣的事情 8) - Andrea Ligios

Answer 1

你需要将包含图片的

绝对定位在主

内，同时将你的
• 的顶部和左侧设置为零，它们将重叠在一起。

  演示样例

  只需更改您的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来控制其在父元素中显示的层级。

- SW4

---

完美运行，太棒了！非常感谢！！ - klg