Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 467
klg Avatar asked Apr 17 '15 06:04

klg


People also ask

How do I stack images on top of each other in HTML?

As the simplest solution. That is: Create a relative div that is placed in the flow of the page; place the base image first as relative so that the div knows how big it should be; place the overlays as absolutes relative to the upper left of the first image.

How do I stack pictures on top of each other in CSS?

The following HTML-CSS code placing one image on top of another by create a relative div that is placed in the flow of the page. Then place the background image first as relative so that the div knows how big it should be. Next is to place the overlay image as absolutes relative to the upper left of the first image.


1 Answers

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

like image 54
SW4 Avatar answered Nov 06 '22 06:11

SW4