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 is possible that you have better opinions and suggestions.
Layout still under development: 
Thepagehasseparateimages(Word"Donkey Kong", the circle with "DK", the monkey image) and I would like to know the ways to build it using HTML and CSS. It's important to leave the images separate because if I wanted to add some fade effect with JQuery it would be easier.
position : You can set the images to absolute position. In this way, the positioning of each one will be defined with the properties top , bottom , left and / or right . In that case, you'd better have an element that surrounds your images, to set the position relative to the element and not (directly) to body .
Useful links: Position: Mozilla Developer Network
CSS3 - Positioning schemes: W3C
Example 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>transform : I think the first alternative is easier, but there is another way to use the translate ( translateY and translateX ) property. You can do as in the previous example, use position:absolute to center both images, one overlapping the other and use transform to change the position of the image vertically / horizontally relative to its upper left point.
Helpful links (both deal with transform overall, not only translate ):
- Transform: Mozilla Developer Network
- Transform: W3C
I expect the image to make it clearer ... A picture ( #vermelha ) and another image ( #azul ). 
Andfinallytheexamplecode:
.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>