Html Image over image

css, html, image

Solution

Difficult to answer properly without knowing exactly what you want to achieve, z-index probably isn't what you actually need. For instance the following would work:

<div id="container">
    <img src="img1.jpg" id="img1" />
    <img src="img2.jpg" id="img2" />
</div>

#container {
    position:relative;
}

#img2 {
    position: absolute;
    left: 50px;
    top: 50px;
}

Also whether you use `<img>` tags or `background-images` depends on the semantic valueof the images, i.e. are they presentational or actualy content of the page?

Problem

Can anyone tell me how can I add an image over another image without using `Z-index` or `Z-order`?

Original source