Foros del Web » Creando para Internet » CSS »

Z-index no me funciona!

Estas en el tema de Z-index no me funciona! en el foro de CSS en Foros del Web. Me estoy haciendo un lio con z-index os incrusto el css i os cuento: Código : Código: * { margin: 0; padding: 0; font-family: Arial; ...
  #1 (permalink)  
Antiguo 05/02/2009, 05:46
 
Fecha de Ingreso: agosto-2008
Mensajes: 26
Antigüedad: 9 años, 4 meses
Puntos: 0
Z-index no me funciona!

Me estoy haciendo un lio con z-index os incrusto el css i os cuento:

Código :

Código:
*
{
  margin: 0;
  padding: 0;
  font-family: Arial;
  font-size: 12px;
}

.clearer
{
  clear: both;
}

body
{
  background-color: #583D1F;
}

#container
{
  background: url('../images/bannerhome_01.jpg') no-repeat top left;
  width: 1000px;
  margin: 0 auto;
}

#header
{
  text-align: right;
  padding: 80px 80px 0px 0px;
  font-size: 13px;
  height: 30px;
  margin: 0 auto;
}

#header a
{
  border-bottom: 2px solid transparent;
  color: #362616;
  font-size: 14px;
  font-weight: bold;
  margin-left: 20px;
  padding-bottom: 1px;
  text-decoration: none;
  letter-spacing: -0.5px;
}

#header a:hover
{
  border-bottom-color: #C16609;
  color: #C16609;
}

#content
{
  margin: 0 auto;
  width: 807px;
}

#page
{
  position: relative;
}

#page_line
{
  background: url('../images/pageline.png') top left;
  width: 807px;
}

#page_up
{
  background: url('../images/pageup.png') no-repeat top left;
  width: 807px;
  height: 41px;
  z-index: 5;
}

#page_down
{
  background: url('../images/pagedown.png') no-repeat top left;
  width: 807px;
  height: 60px;
}

#footer
{
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 auto;
}

#footer .line
{
  float: left;
  color: #FFFFFF;
  font-size: 12px;
  padding-top: 2px;
}

#footer .line_right
{
  float: right;
  color: #FFFFFF;
  font-size: 12px;
  padding-top: 2px;
}

#footer .line_right a
{
  color: #FFFFFF;
  text-decoration: none;
}

#footer .line_right a:hover
{
  text-decoration: underline;
}

#footer .line_right img
{
  border: 0 solid transparent;
  position: relative;
  top: 3px;
  margin-left: 5px;
  margin-right: 5px;
}

#text
{
  margin-left: 45px;
  margin-right: 25 px;  
}

#sub_menu
{
  position: relative;
  text-align: right;
  margin: 0 auto;
  right: 40px;
  top: 40px;
}

#sub_menu img
{
  border: 0 solid transparent;
}

#sub_menu .front 
{
}

#sub_menu .back 
{
  padding-left: 20px;
  float: right;
}

#sub_menu .front img
{
  z-index: 10;
}

#sub_menu .back img
{
  z-index: 1;
}

Lo que quiero hacer es mostrar por encima la propiedad #submenu .front (lo que quiero ver por encima es la imagen de ese div), mientras que la classe llamada back tiene que irse al fondo de todo.
Entonces tengo un cuerpo principal (se ve una libreta disenyada) donde se solapa este menu (echo con post-it), la pagina abierta se debe ver todo el post-it (classe front).
Todo esta bien cortado el unico problema es que no consigo esta disposicion, la libreta siempre se me ve en primer plano mientras que los post-its quedan detras (cuando el front no tendria que ser asi) :shock:

Que puedo hacer??
  #2 (permalink)  
Antiguo 05/02/2009, 06:25
Avatar de javiro  
Fecha de Ingreso: febrero-2006
Mensajes: 48
Antigüedad: 11 años, 9 meses
Puntos: 1
Respuesta: Z-index no me funciona!

La propiedad z-index solo funciona para elementos o contenedores que tengan la propiedad position:absolute;
Por ejemplo:
Código:
#sub_menu .back img
{
  z-index: 1;
  position:absolute;
  top:50px;
  left:130px;
}
Salud!
  #3 (permalink)  
Antiguo 05/02/2009, 07:52
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Z-index no me funciona!

también funciona para la position:relative, no necesariamente tiene que ser absoluto

Código HTML:
#sub_menu img
{
  border: 0 solid transparent;
position:relative;
z-index: 1;
}
asi no tendra que aumentar medidas o esperar que lo que ya esta en su lugar se mueva de ahí
__________________
WFC
codigo82
  #4 (permalink)  
Antiguo 05/02/2009, 08:55
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Z-index no me funciona!

Y para el fixed xD.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #5 (permalink)  
Antiguo 06/02/2009, 03:53
 
Fecha de Ingreso: agosto-2008
Mensajes: 26
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Z-index no me funciona!

Perfecto me funciona en Firefox, en Safari/chrome pero no en explorer 7 (ni os cuento en explorer 6) como se llega a ver!!!

Que le sucede a explorer???

Código:
*
{
  margin: 0;
  padding: 0;
  font-family: Arial, Verdana, Tahoma;
  font-size: 12px;
}

.clearer
{
  clear: both;
}

body
{
  background-color: #583D1F;
}

#container
{
  background: url('../images/bannerhome_01.jpg') no-repeat top left;
  width: 1000px;
  margin: 0 auto;
}

#header
{
  text-align: right;
  padding: 80px 80px 0px 0px;
  height: 30px;
  margin: 0 auto;
}

#header a
{
  border-bottom: 2px solid transparent;
  color: #362616;
  font-size: 14px;
  font-weight: bold;
  margin-left: 20px;
  padding-bottom: 1px;
  text-decoration: none;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

#header a:hover
{
  border-bottom-color: #C16609;
  color: #C16609;
}

#content
{
  margin: 0 auto;
  width: 807px;
}

#page_line
{
  background: url('../images/pageline.png') top left;
  width: 807px;
}

#page_up
{
  background: url('../images/pageup.png') no-repeat top left;
  width: 807px;
  height: 41px;
  z-index: 5;
  position: relative;
}

#page_down
{
  background: url('../images/pagedown.png') no-repeat top left;
  width: 807px;
  height: 60px;
}

#footer
{
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 auto;
}

#footer .line
{
  float: left;
  color: #FFFFFF;
  font-size: 12px;
  padding-top: 2px;
}

#footer .line_right
{
  float: right;
  color: #FFFFFF;
  font-size: 12px;
  padding-top: 2px;
}

#footer .line_right a
{
  color: #FFFFFF;
  text-decoration: none;
}

#footer .line_right a:hover
{
  text-decoration: underline;
}

#footer .line_right img
{
  border: 0 solid transparent;
  position: relative;
  top: 3px;
  margin-left: 5px;
  margin-right: 5px;
}

#text
{
  margin-left: 45px;
  margin-right: 25 px;  
}

#sub_menu
{
  position: relative;
  text-align: right;
  margin: 0 auto;
  right: 40px;
  top: 40px;
  padding-bottom: 80px;
}

#sub_menu img
{
  border: 0 solid transparent;
}

#sub_menu .front 
{
  padding-left: 20px;
  float: right;
}

#sub_menu .back 
{
  padding-left: 20px;
  float: right;
}

#sub_menu .front img
{
  z-index: 10;
  position: relative;
}

#sub_menu .back img
{
  z-index: 1;
  position: relative;
}

.tit
{
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 7px;
}
  #6 (permalink)  
Antiguo 19/02/2011, 12:29
 
Fecha de Ingreso: febrero-2011
Mensajes: 1
Antigüedad: 6 años, 9 meses
Puntos: 0
Respuesta: Z-index no me funciona!

Como sigue genios? Que pasa con z-index y explorer 7? Tengo el mismo inconveniente!
Salutti!
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 20:20.