javascript - 位置 :relative moving image to foreground

Question

我正在尝试在我的网站上实现 Comodo 信任 Logo 。这是一个图像，当您将鼠标悬停在它上面时，它会弹出一个 iframe，其中包含有关该站点的一些安全信息。执行此操作的代码来自第三方。

当 Logo 靠近相对定位的图像时就会出现问题。该图像显示在 iframe 的顶部。如果我从页脚图片中删除 position:relative;，则 iframe 会显示在图片上方。不过，我不能只删除相对定位，因为它会影响页面其余部分的外观。

我已将问题提炼成 jsFiddle HERE .

Answer 1

信任 Logo 将 div 注入(inject)到页面中，并将 z-index 设置为 0，因此基本上它被放置在其他所有内容(包括您的图像)的后面。

将 z-index 更改为任何其他正整数将更改 iframe 的堆叠顺序并将其放置在图像顶部(只要它高于图片的 z-index，除非明确设置，否则为 1)。

将此添加到您的样式表应该可以解决问题(假设 Logo 总是生成具有相同 ID 的 div):

#tl_popupSC5{
    z-index:1 !important;        
}

请注意，包含框架的 div 通过内联样式设置了 z-index，因此您需要确保它被正确覆盖。