Ver Mensaje Individual
  #13 (permalink)  
Antiguo 29/04/2012, 17:11
Avatar de cristian_cena
cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 8 meses
Puntos: 269
Respuesta: ¿Como corregir el problema del boton scroll cuando lo ocultan?

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
  1. <div id="padreRelativo"> <!-- puedes usar una caja que ya tengas, no hace falta que crees cajas extras ¿ok?-->
  2. <p id='back-top'><a href='#top'><span></span>Arriba</a></p>
  3.     <div class="container">
  4.       <p>2012</p>
  5.     </div>
  6. </div>
Código CSS:
Ver original
  1. #padreRelativo{
  2. position:relative;
  3. }
  4. #back-top {
  5. /*... tus estilos...*/
  6. position: absolute;
  7. z-index:1;
  8. }
  9. footer {
  10. /*... tus estilos...*/
  11. position: relative;
  12. z-index:0;
  13. }
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.

Última edición por cristian_cena; 29/04/2012 a las 17:18