No me Funciona el z-index en un plugin de Joomla

[angelsanchezjr]

Hola, le acabo de instalar un plugin de facebook like a un template que tengo en esta pagina
el problema es que como pueden ver, la pestañita de facebook azul a la izquierda esta detras del menu principal, y si la subo mas ya no se ve pues se esconde detras del bloque donde esta el logo, le cambie los valores al archivo z-index en el archivo css y quedo asi:

Código HTML:

#jslikeboxsidebarleft {
z-index:19999 !important;
    position: fixed;
    margin: 0px;
    padding: 0px;
    left: 0px;
    list-style: none;
	
}

#jslikeboxsidebarright {
    position: fixed;
    margin: 0px;
    padding: 0px;
    right: 0px;
    list-style: none;
	z-index:19999 !important;
}

#jslikeboxsidebarleft {
    width: 40px;
		margin-bottom: 5px;	
z-index:19999 !important;	    
}

#jslikeboxsidebarright {
    width: 40px;
		margin-bottom: 5px;	
z-index:19999 !important;	    
}

.jslikeboxsidebarbuttonright {
margin-left: 8px ;
z-index:19999 !important;
}

.jslikeboxsidebarbuttonleft {
margin-left: -305px;
z-index:19999 !important;
}

#likebox iframe {
margin: -1px -4px 0 -4px;
width: 288px;
z-index:19999 !important;
}

#jslikeboxsidebarleft #likebox-frame-lightr {
   -webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topright: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
z-index:19999 !important;
}

#jslikeboxsidebarright #likebox-frame-lightr {
   -webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topleft: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
z-index:19999 !important;
}

#jslikeboxsidebarleft #likebox-frame-darkr {
   -webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topright: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
z-index:19999 !important;
}

#jslikeboxsidebarright #likebox-frame-darkr {
   -webkit-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topleft: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
z-index:19999 !important;
}

#likebox-frame-lightr {
min-height:119px;
background-color:#f4f4f4;
border:4px solid #cccccc;
position: relative;
z-index:19999 !important;
}

#likebox-frame-lights {
min-height:119px;
background-color:#f4f4f4;
border:4px solid #cccccc;
z-index:19999 !important;
}

#likebox-frame-darkr {
min-height:119px;
background-color:#333333;
border:4px solid #cccccc;
z-index:19999 !important;
}


#likebox-frame-darks {
min-height:119px;
background-color:#333333;
border:4px solid #cccccc;
z-index:19999 !important;
}

#likeboxbluestandardleft {
background: url(../images/bluebutton.png) no-repeat right 20px;
height: 109px;
z-index:19999 !important;
}

#likeboxdarkstandardleft {
background: url(../images/darkbutton.png) no-repeat right 20px;
height: 109px;
z-index:19999 !important;
}

#likeboxblueiconleft {
background: url(../images/bluebutton1.png) no-repeat right 20px;
height: 109px;
z-index:19999 !important;
}

#likeboxdarkiconleft {
background: url(../images/darkbutton1.png) no-repeat right 20px;
height: 109px;
z-index:19999 !important;
}

#likeboxbluearrowleft{
background: url(../images/bluebuttonarrowleft.png) no-repeat right 20px;
height: 109px;
z-index:19999 !important;
}
#likeboxdarkarrowleft {
background: url(../images/darkbuttonarrowleft.png) no-repeat right 20px;
height: 109px;
z-index:19999 !important;
}

#likeboxbluestandardright {
background: url(../images/bluebutton.png) no-repeat left 20px;
height: 109px;
padding-left: 34px !important;
z-index:19999 !important;
}

#likeboxdarkstandardright {
background: url(../images/darkbutton.png) no-repeat left 20px;
height: 109px;
padding-left: 34px !important;
z-index:19999 !important;
}

#likeboxblueiconright {
background: url(../images/bluebutton1.png) no-repeat left 20px;
height: 109px;
padding-left: 34px !important;
z-index:19999 !important;
}

#likeboxdarkiconright {
background: url(../images/darkbutton1.png) no-repeat left 20px;
height: 109px;
padding-left: 34px !important;
z-index:19999 !important;
}

#likeboxbluearrowright{
background: url(../images/bluebuttonarrowright.png) no-repeat left 20px;
height: 109px;
padding-left: 34px !important;
z-index:19999 !important;
}
#likeboxdarkarrowright {
background: url(../images/darkbuttonarrowright.png) no-repeat left 20px;
height: 109px;
padding-left: 34px !important;
z-index:19999 !important;
}

.ssupport a {
position: absolute;
text-indent: -8000px;
z-index:19999 !important;
}

Como pueden ver, en cada bloque de texto le inserte un z-index !important con el valor de 19999, ya que de seguro muchos elementos en mi template tienen el valor de z-index en 9999, pero aunque le pongo el atributo !important , la pestaña sigue escondiendose detras de otros elementos de la pagina,incluso cuando sale la ventana y le das un scroll down se esconde parte de la ventana detras de otros elementos, y si le muevo al archivo css del temptate, pues es un desorden por que son muchos los elementos a los que se les tendria que cambiar el atributo z-index, por eso yo pienso que debe funcionar, por que no lo toma en cuenta????'
Mucas gracias por su ayuda.

[flashmax]

el problema esta en #ja-mainnav position: relative; prueba con absolute o sin posicion

[angelsanchezjr]

Gracias flashmax, ya intente lo que me dices pero no me funciono, de hecho ahi mismo si le cambio el z-index de 120 1 1, entonces ya no se esconde detras del menu principal, pero se sigue escondiendo de otros elementos conforme le das un scroll down, ademas yo pienso que deberia ser en el archivo css del modulo de facebook en donde le deberias especificar alguna propiedad para que quedara por encima de todo lo demas no? pero bueno, muchas gracias y si tienenes alguna otra sugerencia con gusto la recibo
Gracias y Saludos!!

[Naahuel]

El problema está con el contenedor padre. Si el contenedor padre tiene un z-index menor, pues no importa qué tanto le pongas al widget, no interesa.

Buscá por tu CSS esta regla:

Código CSS:

#ja-container {
  position: relative;
  z-index: 5;
}
 

Cambiale a un z-index de 1000, por ejemplo y verás que funciona. Claro que eso podría traer consecuencias en otras partes de tu plantilla, por alguna razón eso fue puesto en 5.

[angelsanchezjr]

Hola amigo Naahuel, eso es lo que yo decia, que el template puede tener problemas luego, por eso estaba yo buscando una forma de darle algun valor al css del widget, y no del template,de hecho eso es lo que estoy buscando, cambiar o añadir algun valor al widget para no tener problemas luego con el template, por que no seria un solo archivo al que le tendria que mover, trae varios archivos css, para otros navegadores y pues se me hace tedioso, mejor buscarle al widget, pero muchas gracias, se aprecias todas sus sugerencias
Saludos!!!

[Naahuel]

Y pues no, no creo que exista otra forma. Si el elemento padre tiene un z-index más bajo, no hay nada que se pueda hacer más que cambiarlo. O cambiarlo de posición en el HTML...

¿Lo último no es una opción? No conozco joomla, he trabajado poco con él y me parece espantoso, pero seguramente si se puede.

[angelsanchezjr]

Creo que tienes razon, mejor voy a optar por usar otro y no estarme quebrando la cabeza, Gracias por tu ayuda