Stacking Multiple Images With Z-index

I have two pairs of images that need to be displayed in a div. The images are each 280px wide by 200px high. I need the second pair to be displayed below (after) the first pair in

Solution 1:

It sounds to me you're looking for something more like this:

<divstyle="position:relative; z-index:1;"><imgalt="background 1"src="background1.png"width="280"style="position:absolute; z-index:2;"/><imgalt="overlay 1"src="overlay1.png"width="280" /></div><divstyle="position:relative; z-index:3;"><imgalt="overlay 2"src="overlay2.png"width="280"style="position:absolute; z-index:4;"/><imgalt="background 2"src="background2.png"width="280" /></div>

Also, inline styles are not good practice unless you're designing emails.

Here's a more complete example using css: Live demo (click).

Markup:

<divclass="parent"><imgalt="overlay 1"src="http://placehold.it/280x100/f9ff9f"><imgalt="background 1"src="http://placehold.it/280x100"></div><divclass="parent"><imgalt="background 2"src="http://placehold.it/280x100/f9ff9f"><imgalt="overlay 2"src="http://placehold.it/280x100"></div>

CSS:

.parent {
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
}

.parent > img {
  width: 280px;
  z-index: 2;
}

.parent > img:first-child {
  position: absolute;
}

/* so you can see that they are overlayed */.parent > img:first-child {
  width: 240px;
  height: 60px;
  margin: 20px;
}

Solution 2:

this will work:

<div><divstyle="position:absolute; z-index:1; top: 0;"><imgalt="background 1"src="background1.png"width="280" /></div><divstyle="position:absolute; z-index:2; top: 0;"><imgalt="overlay 1"src="overlay1.png"width="280" /></div><divstyle="position:absolute; z-index:3; top: 290px;"><imgalt="background 2"src="background2.png"width="280" /></div><divstyle="position:absolute; z-index:4;  top: 290px;"><imgalt="overlay 2"src="overlay2.png"width="280" /></div></div>

i changed them all to position absolute and added css-top-rules