Analyze

I've been looking at the code in your JSFiddle . The problem seems to be organizing the elements so that the stack works the way you want.

What I suggest is to use a simple structure and after that you will format it according to the need:

<div id="wrapper">
  <div class="imagem1"> </div>
  <div class="imagem2"> </div>
  <div class="corSolida"> </div>
</div>

In the #wrapper element you give position:relative; and child elements a position:absolute; . This way you can manipulate the position of the three elements to reach the desired composition.

In the same way you can also adjust the position of the #wrapper element and if necessary give it absolute position and get the same position down.

As you currently have, the absolutely positioned elements are relative to the body tab. Since you have two elements at the top ( topoBarra and topoMenu ) already occupying a certain space, the absolute position coordinates begin after the space occupied by said elements, this is because you have the absolute positioning to be given to child elements that per se are child elements of the body tag. (it's confusing, I know ...).

Solution

Example in JSFiddle

HTML

<div id="wrapper">
    <div class="indawo eyodwa">1</div>
    <div class="indawo ezimbili">2</div>
    <div class="indawo amathathu">3</div>
</div>

CSS

html, body{
    width:100%;
    height:100%;
    background-color:yellow;
}

/* Elemento chave para criar a área de manipulação */
#wrapper{
    position:relative;
    background-color:green;
}

/* definições comuns aos três elementos a manipular
 */
.indawo{
    position:absolute;
    background:none no-repeat scroll left top transparent;
    color:red;
    text-align:center;
    line-height:200px;
    font-weight:bold;
}

/* primeiro elemento posicionado absolutamente, com coordenada de topo
 * a 0 (zero) para ficar colado ao topo do elemento #wrapper
 */
.eyodwa{
    top:0px;
    background-image:url(http://i.stack.imgur.com/4WwA2.png);
    overflow: hidden;
    width:592px;
    height:242px;
}

/* segundo elemento posicionado absolutamente, com coordenada de topo
 * para o "chegar para baixo" o suficiente para alinhar as imagens
 */
.ezimbili{
    top:105px;
    background-image:url(http://i.stack.imgur.com/sFCc9.png);
    overflow: hidden;
    width:592px;
    height:213px;
}

/* terceiro elemento posicionado absolutamente, com coordenada de topo
 * para o "chegar para baixo" o suficiente para ter as imagens do primeiro
 * e segundo elemento visiveis por completo.
 */
.amathathu{
    top:318px;
    background-color:blue;
    overflow: hidden;
    width:592px;
    height:200px;
}

Preview

In the preview I'm selecting the elements using the browser inspector to highlight them. You can see that the two elements where the two images are are superimposed. The third element is underneath them.

Each frame lasts 2 seconds.