Foros del Web » Creando para Internet » CSS »

Orden Z-index

Estas en el tema de Orden Z-index en el foro de CSS en Foros del Web. Hola! He estado toda la tarde mirando post pero ninguna de las soluciones aportadas me funciona. Tengo varias capa, y no se porque no me ...
  #1 (permalink)  
Antiguo 03/11/2011, 13:04
 
Fecha de Ingreso: octubre-2009
Mensajes: 299
Antigüedad: 15 años
Puntos: 2
Orden Z-index

Hola!

He estado toda la tarde mirando post pero ninguna de las soluciones aportadas me funciona.
Tengo varias capa, y no se porque no me hace ni caso al orden del Zindex, he probado con 1,2,3,4 y con 10, 20,30 y nada de nada.

¿Se les ocurre algo? ¿Se puede hacer un arbol de forma externa, con otro css o algo que funcione mejor?
El problema es el ultimo de todos

BODY {
margin:auto;
padding: auto;
background: #E4E3E3;
font-family: Arial, Helvetica, sans-serif;
}

#centrado {
position: relative;
margin:auto;
top: 0px;
width: 900px;
height: 550px;
background-color: #FFF;
z-index: 1;
}


#sombra {
position: absolute;
top: 0px;
left: -50px;
width: 1000px;
height: 850px;
background-color: #FFF;
background-image: url(../imagenes/pbk.gif);
background-repeat: repeat-y;
z-index: 2;
}

#cabecera {
left: 0px;
position: absolute;
top: 0px;
background-image: url(../imagenes/Fondo.png);
background-repeat: no-repeat;
height: 252px;
width: 900px;
z-index: 3;
}

#cuerpo {
position: absolute;
top: 225px;
left: 165px;
width: 735px;
height: 550px;
background-color: #FFF;
z-index: 4;
}

#listado {
position:absolute;
width:178px;
height:198px;
left: 50px;
top: 252px;
z-index:5;
}


#maintopic {
position: absolute;
left: 186px;
top: 186px;
height: 30px;
overflow: hidden;
z-index: 6;
font-family: Arial;

}


#maintopic a {
display: block;
float: left;
height: 30px;
padding: 0px 10px 0px 10px;
line-height: 30px;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
letter-spacing : 2px;
color: #666;
}

#maintopic a:hover {
color: #CCC;
background-color: #4D59AB;
font-family: Arial;
background-attachment: fixed;
}



#lateral {
position: absolute;
left: 50px;
top: 450px;
width: 162px;
z-index: 70;
background-repeat: no-repeat;
height: 240px;
background-color: #4D59AB;
}

#inferior {
position: absolute;
left: 50px;
bottom: 0px;
width: 900px;
z-index: 70;
background-image: url(../imagenes/inferior.png);
background-repeat: no-repeat;
height: 240px;
}
  #2 (permalink)  
Antiguo 03/11/2011, 14:36
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: Orden Z-index

sería mas sencillo si además aportases la estructura html
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 03/11/2011, 15:10
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: Orden Z-index

no mire el código pero para que z-index funcione las capas tienen que estar posicionadas distinto de static, o sea, deben ser: relative, absolute o fixed.

si trabajas con absolute controlá (si lo creés necesario) que tengas un padre relativo para que la posicion dependa de este.

Yo por paranoico siempre trato de que las capas que se apilen sean hermanas entre sí, o sea, hijas del mismo padre.

este ejemplo ilustra bien el caso.ç

Sin dudas, sin el html es muy dificil responder porque al parecer estas haciendo bien.

Etiquetas: hover, orden, z-index, fondo, capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:29.