z-index funciona con elementos posicionados en cualquier posicion distinta de
static, por tanto, como ya declaraste posicionamiento en las cajas que intervienen en el apilado solo debes agregar esta propiedad.
Una capa con
z-index:1; se apilará por encima de otra capa con
z-index:0; y así sucesivamente.
Me arriesgo a decir que
position:fixed no es la mejor solucion para
#back-top, ya que no funcionará como esperas para distintas resoluciones. Más bien usa un padre relativo y da
position:absolute a
#back-top Por ejemplo:
Código HTML:
Ver original<div id="padreRelativo"> <!-- puedes usar una caja que ya tengas, no hace falta que crees cajas extras ¿ok?-->
Código CSS:
Ver original#padreRelativo{
position:relative;
}
#back-top {
/*... tus estilos...*/
position: absolute;
z-index:1;
}
footer {
/*... tus estilos...*/
position: relative;
z-index:0;
}
En fin, ¿para que sirve
#padreRelativo? bien, las cotas de
#back-top (propiedades top/left/bottom/right) ahora, gracias a que tenes
una caja absoluta dentro de una caja relativa, dependen de
#padreRelativo. ¿si? De no haber hecho esto, es decir, si dejas a
#back-top con
position:fixed las cotas de este dependeran de la ventana con su consecuentes problemas de visualizacion en distintas resoluciones. Tal vez si tienes tu pagina alineada a la izquierda no lo notes, pero bastaría con centrarla para verlo.
Saludos.
pd: intenta evitar declarar distintos bloques de estilos para un mismo elemento, como en el caso de footer por ejemplo, mas bien coloca todos los estilos en el mismo selector (ej:
footer{/*todos tus estilos para footer acá*/}), con esto obtendrás una mejor legibilidad de tu código.