How to create a page with multiple images? One over the other

Question

I’m drawing a layout and I’m already thinking about what HTML and CSS will look like. I can even imagine how to do it, but it’s possible that you have better opinions and suggestions.

Layout still under development:

The page has separate images (Word "Donkey Kong", the circle with "DK", the image of the monkeys) and I would like to know what are the ways to build this using HTML and CSS. IS important this matter of leaving the images separate because if I wanted to add some fade effect with Jquery would be easier.

Answer 1

Using position:

You can define the images with absolute position. This way, the positioning of each one will be defined with the properties top, bottom, left and/or right. In this case, it is better to have an element that involves your images, to define the position relative to the element and not (directly) to the body.

Useful links:
Position: Mozilla Developer Network CSS3 - Positioning schemes: W3C

Sample Code:

.wrapper {
    border: 2px solid #ccc; /* só para exibir o bloco onde as imagens estão */
    position: relative;
    height: 200px;
    width: 500px
}

.dixie, .diddy {
    position: absolute
}

.dixie {
    top: 15px;
    right: 150px;
    max-width: 115px
}

.diddy {
    left: 150px;
    max-width: 130px
}

<div class='wrapper'>
    <img class='dixie' src='http://i.stack.imgur.com/A06Ly.png' alt=''/>
    <img class='diddy' src='http://i.stack.imgur.com/ZN4KS.png' alt=''/>
</div>

---

Using transform:

I believe the first alternative is easier, however there is another way to use the property translate (translateY and translateX). You can do as in the previous example, use position:absolute center both images, one superimposing the other and use transform to change the position of the image vertically/horizontally in relation to its upper left point.

Useful links (both deal with transform in general, not only translate):
- Transform: Mozilla Developer Network
- Transform: W3C

^{I hope the picture makes it clearer...
A picture (#vermelha) and another image (#azul).}

And finally the sample code:

.wrapper {
    border: 2px solid #ccc;
    position: relative;
    height: 200px;
    width: 500px
}

.dixie, .diddy {
    position: absolute;
    top: 10px;
    left: 180px
}

.dixie {
    transform: translateX(40px);
    max-width: 120px
}

.diddy {
    transform: translateX(-40px);
    max-width: 130px
}

<div class='wrapper'>
    <img class='dixie' src='http://i.stack.imgur.com/A06Ly.png' alt=''/>
    <img class='diddy' src='http://i.stack.imgur.com/ZN4KS.png' alt=''/>
</div>