How can I put my overlay div * above * the Facebook Like button?

I disappear into a hidden div as an overlay div (with jQuery). It appears above all the elements on my page except the Facebook Like button.

I tried z-index: 100;

in CSS but it didn't work.

Has anyone had this problem?

PS: The same happens with the Twitter button, but not with the Google +1 button

    <fb:like href="http://www.apple.com" send="true" layout="button_count" 
width="450" show_faces="false"></fb:like>

      

+3


source to share


1 answer


Ok, that makes sense considering that Twitter and Facebook button use JS to create their buttons.

Since JS runs the client side after all your styles have loaded, it can always overwrite any attempts to cover it.

I do think that closing facebook like a button might be against TOS, but you will need to check that.

What to try

Enable Div



Create a div around it with the appropriate z-index.

Correct z index

Make sure the FB and Twitter buttons don't create a z-index larger than yours. While the z-index technically only goes from 0-255 (I think), people go negative and above 255 to make sure they are the highest or lowest.

JavaScript

After the buttons have loaded, use JS to set the z-index or other properties to hide

+3


source







All Articles