Divisiones superpuestas

Question

Necesito 2 divs superpuestos, que se parecen al siguiente.

------------------------------------ 
    |      |    | 
    | ------------------ |    | 
    | '     '|    | 
    | '     '|    | 
    | '     '|    | 
    | '     '|    | 
    | '     '|    | 
    | '     '|    | 
    | '     '|    | 
    | --------------------|    | 
    | '     '|    | 
    | '     '|    | 
    | -------------------|    | 
    |      |    | 
    |      |    | 
    ------------------------------------ 

Pero de alguna manera soy incapaz de conseguirlo. here is the place am fiddling out ¿Alguien me puede decir dónde me estoy equivocando?

Editar 1: Tengo un div izquierdo y un div derecho. El div izquierdo tiene el div superpuesto. Right div es una div normal. Supongo que la mayoría de ustedes están confundidos y creen que el div correcto es el que se superpone, hay 2 divs en el div izquierdo que necesito que se superpongan.

Perdón por confundirlos a todos.

Answer 1

creo que quieres algo como esto:

html

<div class="parent"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 

css

.parent { 
    position: relative; 
} 

.a { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    z-index: 100; 
    background: red; 
} 

.b { 
    position: absolute; 
    width: 80px; 
    height: 180px; 
    z-index: 110; 
    left: 10px; 
    background: blue; 
    top: 10px; 
} 

Editar: en su caso, los padres = contentContainer, a/b = leftContainer/rightContainer

Answer 2

No estoy realmente seguro de cómo utilizar el índice z

pero creo que esto podría ayudar en la etiqueta de estilo

margin:-50px -50px 0px 0px; 

las obras propiedad menos, lo bien que se hace debe ser todo acerca de las pruebas

Answer 3

he cambiado de la siguiente manera:

#rightContainer { 
    /*float:right ;*/ 
    width:20%; 
    /*margin:0px;*/ 
    margin-top: 30px; 
    margin-left: 30px; 
    padding:0px; 
    position:relative; 
    background-color:Lime; 
} 

Usted puede cambiar el " 30px "como quieras. He probado solo en FireFox.

Answer 4

Tendrás que usar top, left y z-index propiedades para eso.