Error in Divs positioning

Question

I have one page, which has three divs. The first contains a manageable banner the second has a background image and the third is a chapada color. How the image below shows:

My question is: the banner one has a cut and the two also, in case I will use a JPG. however, as the Divs are square by default, I will have to use position and z-index.

My current code is like this http://jsfiddle.net/felipestoker/87L7r2nx/

What happens is that when I get to div three, putting position and z-index, only he doesn’t show up.

What is wrong?

Answer 1

Analyze

I’ve been looking at the code in your Jsfiddle. The problem seems to be the organization of the elements so that the stack work the way you want.

What I suggest is to use a simple structure and after that go formatting as needed:

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

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

Similarly you can also adjust the position of the element #wrapper and if necessary give it absolute position and reach the same down.

As you currently have, the elements placed absolutely are relative to the tab body. Since you have two elements at the top (topoBarra and topoMenu) already occupying a certain space, the coordinates of absolute positioning begin after the space occupied by those elements, this because you have the absolute positioning to be given to child elements that by themselves are child elements of the tag body. (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 am selecting the elements using the browser inspector to highlight them. You can see that the two elements where the two images are superimposed. The third element is below them.

^{Each frame lasts 2 seconds.}