Como hacer un boton web flotante
Categories: CSS, Diseño, html - Tags: CSS, html, maquetaciónLuego de las fiestas de año nuevo – feliz año nuevo a todos los lectores del blog – decidí escribir algo sobre algunas cosas que se van poniendo de moda como botones flotante, menus flotantes tipo facebook, algo más de ajax con jquery y cosas asi.
Veamos este boton se mantiene fijo en una parte de la pantalla aún mientras usamos el scroll de allí que sea muy útil para poner un botón RSS, algún banner con propaganda o tal vez una flecha para regresar al inicio, algunos los usan para menús, personalmente creo que para eso hay otra forma de maquetar o terminaremos teniendo un menu que se superponga al contenido.
La idea es muy simple aunque pueda dar problemas en IE6 (a ver si nos vamos olvidando de ese navegador) sin embargo hay hacks sencillos para el uso de position fixed en IE6.
Lo primero es colocar nuestra imágen (para este tutorial una de RSS) como si fuera un link, aunque no sólo podemos usar imágenes sino prácticamente cualquier cosa.
Y ahora para que aparezca fijo en pantalla usamos el siguiente estilo:
1 2 3 4 5 6 | .flotante { display:scroll; position:fixed; bottom:320px; right:0px; } |
Y eso es todo, no hace falta javascript ni gigantescos códigos que visto rondando la web.
¿Cómo hacerlo funcionar en IE6?
No soy fan de los hacks porque o no funcionan o lo hacen a medias, IE6 no reconoce el position fixed es necesario darle una manito agregando las siguientes líneas de código al inicio de nuestra hoja de estilos.
1 2 3 4 5 6 7 8 9 | html { overflow-y: hidden; } html body { height: 100%; overflow: auto; } |
OJO: Al usar este hack positon:absolute deja de funcionar en IE6 y sólo funciona en el standards-compliant mode, osea si tienes un bloqueador de ads o algo así es probable que no funcione. No quería dar este hack porque es un poco tonto dar un código con tantos peros.
Interesante, seria mucho muy diferente lo contrario? es decir que se moviara con el scroll
En vez de usar position:fixed, ponle position:absolute
Muy bueno, siempre tube la duda como ponian esos botones flotanto, a ver ando algo olvidado de css fixed queda un objeto quieto nada mas no?
Exactamente fixed lo deja quieto en un punto especifico de la pantalla, absolute lo pone en un punto de la pantalla pero afectado por el scroll, relative es el que anda por defecto. Fixed también puede ser usado en fondos para crear algunos efectos interesantes.
Hola Miguel
Sabes que me gustaría saber un hack fácil de implementar para utilizar la imagen de el background fija y que funcione en IE6, en la siguiente plantilla estoy usando posición Fixed para la imagen de fondo, pero ya vez que aun algunos siguen usando IE6 y las cosas no se verán igual con ellos :S
Para este tipo de diseño lo necesito:
http://alotroladodelsol-karla.blogspot.com/
Gracias por tu tiempo y ayuda!
Saludos!!
Mejor olvidemonos del IE6
[...] en Miguel Manchego.com AKPC_IDS += "2299,"; [...]
Miguel, yo no me dedico a esto profesionalmente y sin embargo me choca IE6, pero desafortunadamente aun lo usan algunos (ojala se lo tragara la tierra o le cayera un rayo jaja..!), bueno,
me gustaria saber el hack para que funcione correctamente el boton flotante en IE6…
Hola, usualmente procuro enseñarle al cliente que ya debe desechar ese navegador pero aún mostrándole lo interesante que es Firefox hay gente que suele ser reticente al cambio. Actualizaré el post con el hack (ojo con ciertas páginas pueden no funcionar o dar líos no es 100% efectivo)
simplemente genial, tengo que retomar los libros de CSS. Gracias
Muy buen artículo. Me ha ayudado mucho. Pero me surge un problema: cuando el botón se superpone con un div el botón oculta el contenido del div. A mi me interesa que el contenido del div prevalezca sobre el botón. He intentado resolverlo con z-index, pero no me funciona. ¿ Puedes ayudarme ?. Muchas gracias.
muy buena la información!!! muchas gracias!!