title: How to stack multiple images directly on top of each other?
body: <p>I am trying to create an interactive filtered map. Basically I have a background image and some different checkboxes that result in the appearance of images. If you only tick one checkbox, it works fine - the image just appears over the background image. However, if you check multiple images, the other image filters I have set just appear below whatever filter image was checked first. Ideally, the images can overlay on top of each other so they are all seen juxtaposed over the map at once. </p>
  
  <p>I apologize if this isn't clear - I am brand new to coding. Here is the jsfiddle so you can see what I'm talking about: <a href="http://jsfiddle.net/klgraywill/Ddnuh/851/">http://jsfiddle.net/klgraywill/Ddnuh/851/</a></p>
  
  <pre><code> &lt;ul class="results"&gt;
      &lt;li class="spaces"&gt;&lt;div style="position:absolute top: 0px; left: 100px"&gt;&lt;img src="http://i.imgur.com/hh0IBC2.png" style="width:804px;height:356px"/&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;li class="elements"&gt;&lt;div style="position:absolute top: 0px; left: 100px"&gt;&lt;img src="http://i.imgur.com/qsJuERK.png" style="width:804px;height:356px"/&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;li class="silence"&gt;&lt;img src="http://i.imgur.com/KMsmbvf.png" alt="silence" style="width:804px;height:356px""position: relative; top: 0px; left: 100px"/&gt;&lt;/li&gt;
      &lt;li class="pollution"&gt;&lt;img src="http://i.imgur.com/Wjlj4JI.png" alt="polution" style="width:804px;height:356px""position: relative; top: 0px; left: 100px"/&gt;&lt;/li&gt;
      &lt;li class="active"&gt;&lt;img src="http://i.imgur.com/0AF16WH.png" alt="active" style="width:804px;height:356px""position: relative; top: 0px; left: 100px"/&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>