Propiedad z-index

[wigglyUtrera]

Hola, tengo un problema:

Pongo en el estilo de la capa1: z-index:1

y en la capa2: z-index:2

pero no se ve bien.

En teoria la capa2 se tendria que ver por encima no??


Hay que darle algun estilo mas???

Lo estoy tratando hacer en IE.

Saludos.

[Mikmoro]

Al menos deberían tener un position (relative o absolute), creo.
Pon si puedes el código para verlo.

Mikel.

[wigglyUtrera]

ahi va el codigo:

Código HTML:

<div id="contenido_cabecera" class="contenido_cabecera">
	<div id="panel_control">
		<a href="javascript:aparecer('#acceso')">
		Panel de Control
		<img src="img/acceso.gif" alt="Acceder" />
		</a>
             </div>
	<div id="panel_control_debajo">
						
	</div>
							
</div> 

y el CSS:

Código PHP:

  .contenido_cabecera{
position: relative;
width:471px;
background-image: url("C:\AppServ\www\steel\img\a_01.gif");
background-repeat: no-repeat;
height:39px;
padding:0;
float:left;
z-index: 3;
}
#panel_control{
padding: 15px 50px 0 0;
z-index:2;
float:left;
border:1px solid green;
 
}
#panel_control_debajo{
position:absolute;
margin-top:4px;
width:10%;
background-color:#E0E0E0;
border:2px solid red;
border-right:0;
height:31px;
z-index: 1;
margin-left:100px;
}
#panel_control img{
border:0;
} 
   

Saludos.

[Mikmoro]

Como te decía, si quieres que la capa que tienes en position: absolute (#panel_control_debajo), se meta debajo de la que pones después (#panel_control), deberás dar a esta position:relative;.

#panel_control{
padding: 15px 50px 0 0;
z-index:2;
float:left;
border:1px solid green;
position: relative;
}

Mikel.

[wigglyUtrera]

Quiero que se me meta debajo de contenido_cabecera.


Saludos.

[Mikmoro]

Pero así no es posible, porque tal y como tienes el código, está dentro de "contenido_cabecera", y no podría estar debajo de su propio contenedor. Podría estar debajo de otras "hermanas" en el contenedor, pero no debajo de éste.

En ese caso, con la css que tienes te bastaría con cambiarla de sitio. En lugar de tenerla aquí:

Código:

<div id="contenido_cabecera" class="contenido_cabecera">
<div id="panel_control"><a href="javascript:aparecer('#acceso')">Panel de Control
<img src="img/acceso.gif" alt="Acceder" /></a></div>
<div id="panel_control_debajo"></div>
</div>

podrías ponerla aquí:

Código:

<div id="panel_control_debajo"></div>
<div id="contenido_cabecera" class="contenido_cabecera">
<div id="panel_control"><a
 href="javascript:aparecer('#acceso')">Panel de Control<img
 src="img/acceso.gif" alt="Acceder" /></a></div>
</div>

y así creo que sí quedará debajo sin tocar tu css de como está.

Otra cosa: no sé lo has visto en explorer 6, pero se te marcha a la derecha. Creo que lo puedes solucionar cambiando el margin-left: 100px; por left: 100px; en su selector:

#panel_control_debajo{
position:absolute;
margin-top:4px;
width:10%;
background-color:#E0E0E0;
border:2px solid red;
border-right:0;
height:31px;
z-index: 1;
left:100px;
}

Mikel.

[wigglyUtrera]

Graciasss!!!!

Funciona perfecto.