Hola gente, idenmedia respondi tu email, asimismo adjunto aquí la respuesta para quien le sirva:
Hola jose, la lógica de trabajo es esta, luego tu la aplicas a lo que necesitas:
Los elementos que se quieran posicionar con z-index deben ser hermanos entre si y deben estar posicionado en relativo, absoluto o fijo
ej:
Código:
<div id="papa">
<div id="hijoatras">... el contenido que quieras ...</div>
<div id="hijomedio">... el contenido que quieras ...</div>
<div id="hijodelante">... el contenido que quieras <a href="#">soy un enlace</a> ...</div>
</div>
#papa{
position:relative: /*damos relative para que pase a ser el contenedor de elementos anidados con posicion absoluta y que la esquina sup-izq de #papa sea el punto 0,0 de coordenadas para los top-left-right-bottom de sus hijos anidados */
width:/*el que quieras*/;
height:/*el que quieras*/;
}
#hijoatras{
position:absolute;
z-index:1;
width:/*el que quieras*/;
height:/*el que quieras*/;
top:/*lo corres cuanto quieres*/;
left:/*lo corres cuanto quieres*/;
}
#hijomedio{
position:absolute;
z-index:2;
width:/*el que quieras*/;
height:/*el que quieras*/;
top:/*lo corres cuanto quieres cuidando que no halla ningun enlace detras ;)*/;
right:/*lo corres cuanto quieres cuidando que no halla ningun enlace detras ;)*/;
}
#hijodelante{
position:absolute;
z-index:3;
width:/*el que quieras*/;
height:/*el que quieras*/;
top:/*lo corres cuanto quieres cuidando que no halla ningun enlace detras ;)*/;
left:/*lo corres cuanto quieres cuidando que no halla ningun enlace detras ;)*/;
}
PD:
[jose me pregunta por email: Tengo otro error que es que por más que modifico el contenido de algunos artículos, no se hacen los cambios, no sé si eso tiene que ver algo…]
Respuesta:
cuando hagas cambios y nada cambie fijate que estes usando correctamente los selectores css, o sea a lo mejor en una id te comiste un # o te olvidaste de lagun ; q se yo cosas q pasan
asimismo tene en cuenta que si das estilo directamente en la etiqueta html estos son mas fuertes que los estilos que das desde un archivo.css externo.
En cualquier caso puedes incluir un !important para pisar estilos.
ej:
Código:
<p style="background:red;"> //el fondo sera rojo
p{background:blue !important;} // ahora el fondo sera azul.
--------------------------------------------------------------------------------------------------
aquí puedes encontrar un ejemplo de como trabaja z-index.