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>
source to share
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
source to share