1

I have a fb like button on my website but when a user clicks on the button the the pop up comments box is hidden behind the two elements (#centre and footer) and the user can do nothing with it.

My question is, How do I change the z-index of the flyout so when a user clicks the like button it appears in front of other elements?

I have looked at these questions and implemented their answers with no luck in fixing the issue:- facebook iframe App: Send/Like button z-index issue

Other fixes I have found that did not work were:-

  1. Elements that appear in front of/around the flyout should have overflow: visible; set. (From fb developers FaQ page.)

  2. Changing the z-index of the classes that are listed in the answer from the link above.

  3. Changing the width and z-index of a class generated by the iframe, and located in a script tag, called _56z-

All I would like is the flyout to appear on top of all elements on the page without having to change the layout.

Here is the link to my site http://mikelonsdale.co.uk

Thank you for your time and help.

4

3 回答 3

1

以下代码完全解决了这个问题，而无需更改任何内容的溢出或 z-index。您只需添加下面的代码，瞧。但是，它会稍微偏离您网站的布局（它会溢出.. 哈）。惊人的修复，小收获。边界可以接受，但我找到了最好的解决方案。（在 WP 论坛上找到它）。

.fb-like span {
    overflow: visible !important;
    width: 450px !important;
    margin-right: -375px;
}
于 2014-08-10T01:38:30.777 回答
1

Change the z-index for your #centre and #footer div's to negative values. This should fix the problem.

Don't forget to change all of the other elements in relation to your site. You will be moving the #centre div to at least to z-index: -2 (to allow room for the #footer div to fit in at -1).

于 2013-10-17T02:44:33.673 回答
1

我添加了

    .fb-like span {
    z-index: 999999999999999;
}

到我的 CSS 并修复它。它甚至没有被标记为活动的，在开发者工具中停用它也不会改变任何东西。如果我把它从我的 CSS 中拿出来，那么一切都会变得愚蠢。

于 2014-10-13T15:40:10.603 回答