WebSite X5Help Center

 
Diego G.
Diego G.
User

Mi ícono de whatsapp no queda sobre todos los elementos  es

Autor: Diego G.
Visitado 738, Followers 1, Compartido 0  

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>

Publicado en
9 RESPUESTAS
CARLOS AMARAL
CARLOS AMARAL
Moderator
Usuario del mes ES

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.

Leer más
Publicado en de CARLOS AMARAL
Diego G.
Diego G.
User
Autor

Hola Carlos! Muchas gracias por tu respuesta.

Me pasa en el sitio: www.ardur.com.ar y en www.diseño1.com

Saludos!!

CARLOS AMARAL
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.
Leer más
Publicado en de Diego G.
CARLOS AMARAL
CARLOS AMARAL
Moderator
Usuario del mes ES

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.

Leer más
Publicado en de CARLOS AMARAL
Diego G.
Diego G.
User
Autor

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!

CARLOS AMARAL
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.
Leer más
Publicado en de Diego G.
CARLOS AMARAL
CARLOS AMARAL
Moderator
Usuario del mes ES

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.

Leer más
Publicado en de CARLOS AMARAL
Miguel Galarza
Miguel Galarza
User

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.

 

Leer más
Publicado en de Miguel Galarza
Miguel Galarza
Miguel Galarza
User

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.

Leer más
Publicado en de Miguel Galarza
Diego G.
Diego G.
User
Autor

Ah bueno, si entiendo y veo que es eso.. 

Muchisimas gracias por tu ayuda!!! smile

Saludos!!

Leer más
Publicado en de Diego G.
CARLOS AMARAL
CARLOS AMARAL
Moderator
Usuario del mes ES

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.

Leer más
Publicado en de CARLOS AMARAL