How to stack multiple images directly on top of each other?

Question

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.

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: 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>

I suspect you are working on something very interesting 8) – Andrea Ligios Apr 17 '15 at 07:22 — Andrea Ligios, Apr 17 '15 at 07:22

SW4 · Answer 1 · 2015-04-17T07:10:37.660

You need to absolute position the li containing the images within the main ul, by also setting the top and left of your li to zero, they will layer above one another.

Demo Fiddle

Simply change your CSS to:

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*/
}

Note that if you have applied a position value to an element other than static, you can also control the layer it appears in relative to its parent by setting the z-index

How to stack multiple images directly on top of each other?

1 Answers1

Demo Fiddle