Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Piling up images from the bottom to the top in div

Tags:

html

css

Say I have a div container with a fixed width and height. Now, I want to add images to the container, with images piling on top of each other.

If I just fix the width of the container, and add images inside it, they will pile up from top to bottom. How can I make them pile up from bottom to top?

Thanks

like image 907
user1083320 Avatar asked Dec 28 '11 00:12

user1083320


People also ask

How do I overlay an image in a div?

You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).

How do I move an image to the bottom in CSS?

If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.


1 Answers

To make it work in modern browsers, you could use display: table-cell:

css

.container {
    display: table-cell;
    vertical-align: bottom;
}
.child {
    display: inline-block;    /* act like image */
}

html

<div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

An example on jsfiddle.

By the way, that only aligns them to the bottom, it still shows the first block on top...

like image 79
jeroen Avatar answered Oct 01 '22 12:10

jeroen