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
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 ).
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.
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With