Z-index no me funciona!

[taxiarcos]

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??

[javiro]

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!

[willyfc]

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í

[Dalvenjha]

Y para el fixed xD.

[taxiarcos]

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;
}

[tapichus]

Como sigue genios? Que pasa con z-index y explorer 7? Tengo el mismo inconveniente!
Salutti!