facebook iframe 应用程序：发送/赞按钮 z-index 问题答案

【问题标题】：facebook iframe App: Send/Like button z-index issuefacebook iframe 应用程序：发送/赞按钮 z-index 问题
【发布时间】：2014-08-28 00:51:45
【问题描述】：

我们的 Facebook 点赞/发送按钮有问题，如果您打开：http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce: - 点击 facebook 发送，该框位于 facebook 侧边栏后面。有什么办法：改变 z-index - 或者让窗口在左边弹出？

【问题讨论】：

标签： html css facebook fbml facebook-like

【解决方案1】：

我终于找到答案了！！ 1 1/2 小时后搜索.. 只需将此代码输入您的 CSS 文件：

.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}

希望这就是您要找的，因为这正是我要找的！

【讨论】：

平台集成，包括社交插件：d.您不得遮盖或遮盖我们社交插件的元素，例如点赞按钮或点赞框插件。
技术上他并没有掩盖它 - 事实上他正在做相反的事情;)

【解决方案2】：

确保父/容器元素的 css 值为 "overflow:visible"。它发生在"overflow:hidden" 时。希望这会有所帮助。

【讨论】：

【解决方案3】：

它弹出并覆盖所有内容的方法是使like按钮在XFBML中工作。 iframe 实现是有限的，如果您将其高度和宽度更改为刚好适合按钮，窗口将显示为隐藏。

【讨论】：

究竟如何？代码：
Fancis，我使用 xFBML 按钮，它们不会自行重新定位。我想问你是否可能缺少一个参数？

【解决方案4】：

我发现这行得通：

/* the below allows the fb:like iframe to show entirely instead of getting cropped off */

.fb-like iframe {
    max-width: inherit;
}

/* the same issue with the "send" button */

.fb-send iframe {
    max-width: inherit;
}

如您所见，它要求这些元素“继承”其父元素的宽度属性。

希望对您有所帮助。

【讨论】：

【解决方案5】：

我修改了 Shane 的优秀解决方案，特别关注 z-index：

css:

.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
    z-index:8 !important;
}

上面的 css 代码将 Facebook 小部件显示在所有其他内容之上，而无需重新定位或“溢出”任何内容。

【讨论】：

【解决方案6】：

这是所有开发人员都面临的常见问题。弹出窗口无法检测其在页面或 iframe 中的相对位置。
为了获得想要的结果，我总是在我的页面左侧安装我喜欢的发送按钮。

【讨论】：