Have you installed a Facebook Like button on your site, but are having a problem with the comment box showing up underneath other content on the page? Here’s an example of what I’m talking about:

I couldn’t figure out how to fix it for the life of me. I tried changing the z-index on everything around it, but despite searching Google and asking smarty front-end developers, nobody could figure it out.

The good news: I finally figured it out!! The solution was ridiculously simple.

At first I thought I needed to give my div [the one that has my sharing buttons in it] a style of position:absolute;

For example, my Twitter, Facebook and Google+ buttons in <div class=”sharing-links”>, so that style is set as:

.sharing-links { margin:10px 0;position:absolute;}

This worked, but then I realized having position:absolute was messing up some other places on the site where that code was showing up… so I did some more digging and FINALLY saw this helpful FAQ line at the bottom of the FB Like button page:

When I click the Like button, the popup window (or “flyout”) doesn’t show. Why?
If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting setting the overflow property to a value other than hidden, such as visible, scroll, or auto.

Then I realized I did have my sharing-links div within another div that had an (unnecessary) overflow:hidden set on it. Huzzah!

So, hilariously, I feel really smart and really dumb all at the same time. Regardless, because I searched so much trying to find an answer, I hope this helps someone else out there having the same frustrating problem! :)