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