How to overlay images without using postion:absolute?

Question

I'm looking for the proper CSS method to overlay div of images on top of another div of images (not background image) without using position:absolute. Anyone know how to do this?

Answer 1

http://jsfiddle.net/HUUQ6/2/

You can overlay/overlap elements on top of one another using a negative margin. Example:

#b{
    margin-left:-10px;
}

This will move the element b to the left 10px, overlaying whatever is to the left of it (assuming this is a display:block type element, not an inline, like a span).

Answer 2

position: absolute isn't "improper" - it's part of the CSS spec! There isn't another way to put elements over other elements, unless you faff about with position: relative or maybe some float properties.

position: absolute is the easiest way to do it. What makes you think it's a bad idea?

---

The only other solution is to use an image inside a div with a background, like this:

<div>
    <img src="...">
</div>

Then give the div a background-image:

div
{
    background: url(/images/foo.png) no-repeat;
}

However, for multiple images I'd definitely stick to position: absolute.

There's a very glitchy demo here demonstrating the effect.