Z Index Superposicion de objetos y texto

marcos_eusebi · #1 (**permalink**) 02/01/2012, 14:58

Hola a todos, tengo una pequeña duda con la priopedad Z-Index.

Estoy tratando de hacer que div 1 tenga "Z-Index: 1" div 2 "Z-Index:2" y que el texto dentro de div 1 tenga "Z-Index: 3". Resumiendo, quiero que el texto del div 1 se vea sobre el 2 pero que el 2 este sobre el 1.

Este es el codigo que estoy utilizando:

HTML:

Código HTML:

Ver original<div class="div1"></div>
<div class="div2"><span>asd</span></div>

CSS:

Código CSS:

Ver original.div1 {
    background-image: url(Images/side-top.png);
    height: 148px;
    width: 174px;
    z-index: 2;
    position: relative;
}
.div2 {
    background-image: url(Images/side-mid.jpg);
    height: 288px;
    width: 174px;
    margin-top: -110px;
    z-index: 1;
    position: relative;
}
span {
    color: #FFF;
    text-align: center;
    position: relative;
    z-index: 3;
}

Lo que busco es que me expliquen que esta mal en el codigo y como solucionarlo.

Desde ya muchas gracias.
Marcos.

kseso? · #2 (**permalink**) 02/01/2012, 15:12

2 contenedores posicionados con "relative" nunca se podrán superponer. Ocuparan dos líneas horizontales diferentes.

Si un elemento lo posiciona sobre otro también lo hará todo lo contenido en él. A no ser que...

Código HTML:

Ver original<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Kseso? jugando con css</title>
<style type="text/css">
 .div1 {
    background: red;
    height: 148px;
    width: 174px;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
}
.div2 {
    background: blue;
    height: 288px;
    width: 174px;
    position: relative;
}
span {
    text-align: center;
    position: relative;
    z-index: 3;
}
 </style>
</head>
<body>
    <div class="div2"><span>asd</span></div>
    <div class="div1"></div>
</body>
</html>

marcos_eusebi · #3 (**permalink**) 04/01/2012, 15:58

Muchas gracias por la respuesta, muy util.