Mi ícono de whatsapp no queda sobre todos los elementos 
Author: Diego G.Tengo una web, en la que puse el código HTML para que aparezca el botón de WhatsApp flotante, pero no queda sobre todos los elementos, ¿Qué puedo hacer?
Este es el código que utilizo, igual con otros me pasó lo mismo:
<style type="text/css">.redes-flotantes {
position: fixed;
right: 6px;
top: 80%;
z-index: 60px;
}
.redes-flotantes img {
float: right; clear: right;
margin: 5px;
-moz-transform: scale(.8) ;
-webkit-transform: scale(.8) ;
-o-transform: scale(.8) ;
-ms-transform: scale(.8) ;
transform: scale(.8) ;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.redes-flotantes img:hover {
-moz-transform: scale(1.1) rotate(6deg);
-webkit-transform: scale(1.1) rotate(6deg);
-o-transform: scale(1.1) rotate(6deg);
-ms-transform: scale(1.1) rotate(6deg);
transform: scale(1.1) rotate(6deg);
}</style>
<div class='redes-flotantes'>
<div class="separator" style="clear: both; text-align: left;"></div>
<div class="separator" style="clear: both; text-align: center;"></div>
<div class="separator" style="clear: both; text-align: center;"></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://wa.me/5491166808116" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img border="0" data-original-height="59" data-original-width="59" src="images/wpp.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div></div>
Hola Diego,
Uno de los pocos usuarios de este foro que sabe de codigo HTML es KolAsim, el quiza pueda ayudarte... pero desde ya te digo que posiblemente el te pida la url del sitio web donde tienes el problema, para analizar que puede ser lo que pasa, por lo que si puedes facilitarnos la url se agradece!
Saludos colega...
Carlos A.
Author
Hola Carlos! Muchas gracias por tu respuesta.
Me pasa en el sitio: www.ardur.com.ar y en www.diseño1.com
Saludos!!
Que tal Diego...
Te cuento que lo veo bien en los dos sitios:
Y moviendome por la pagina, queda siempre delante del resto del contenido.
Al menos en Firefox se ve bien, incluso en distintos anchos de pantalla.
Saludos colega
Carlos A.
Author
Claro, pero en vista movil o cuando no queda margen a los costados y uno hace scroll, ahí se ve mal, como que pasa por el fondo el ícono :/
Saludos!
Ahhhh ok ok...
Esperemos que KolAsim vea esto entonces, a ver si te puede dar alguna pista sobre que puede ser el problema, ya que el staff de Incomedia no estudia casos si es codigo personalizado.
Saludos colega
Carlos A.
Saludos:
Para entender un poco esto...
Los objetos (imágenes, textos, galerías, fondos de pie de páginas y encabezados, etc.) se van apilando uno sobre otro, mediante la línea: z-index:;
La propiedad CSS z-index indica el orden de un elemento posicionado y sus descendientes. Cuando varios elementos se superponen, los elementos con MAYOR valor z-index cubren aquellos con menor valor.
En tu código tienes asignado un número de 60px en: z-index: 60px;
z-index debe ir con número entero. Mira capturas.
La imagen de arriba muestra tu código z-index:60px; básicamente se anula.
Quitando px y dejando 60 lo reconoce y se muestra por encima de los demás objetos.
Solución:
1) Quita px y solo deja el 60, eso debería bastar.
2) Si presenta sobreposicionamiento de otro objeto... Cambia ese número a uno más elevado por ejemplo 10600.
Prueba y comentas.
Otra vez Yo: dejando 60 solamente, hasta el fondo se sobrepone el texto de: Azcuénega 175 ...
Ese objeto texto tiene un número más elevado, por lo tanto la solución 2 es la mejor. coloca 10600.
NOTA: Hay objetos que pasan del númeo 1000, ve a lo seguro mientras más elevado sea mejor.
Author
Ah bueno, si entiendo y veo que es eso..
Muchisimas gracias por tu ayuda!!!
Saludos!!
Muchisimas gracias Miguel!!!
No sabia eso, pero como digo siempre... por aqui siempre se aprende, hasta de las consultas de los demas.
Tomo nota, y te vuelvo a agradecer la explicacion yo tambien!!!
Saludos colega!
Carlos A.