CODEWITHSUNDEEP
htmlcssfacebook
alexx0186
alexx0186

Reputation: 1557

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

I am fading in a hidden div as an overlay div (with jQuery). It appears above all elements of my page, except the Facebook Like button.

I tried z-index: 100; in CSS but it didn't work.

Anyone had that problem?

PS: Same thing 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>

Upvotes: 3

Views: 1647

Answers (1)

Adam
Adam

Reputation: 16199

Ok, this seems to make sense, considering the twitter and Facebook button will use JS to create their buttons.

Because the JS will run client side after all your styles have loaded, it can always overwrite any attempts to cover it up.

I actually think covering up the facebook like button might be against the TOS but you will need to check into that.

Things to try

Encompassing Div

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

Correct z-index

Make sure the FB and Twitter buttons aren't creating z-index's greater than yours. While 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

Upvotes: 3

Related Questions