Question

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

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

我已将问题提炼为jsFiddle HERE。

Answer 1

信任徽标在页面中注入div且z-index设置为0，因此基本上它被置于其他所有内容（包括您的图像）之后。

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

将此添加到样式表应该可以解决问题（假设徽标始终生成具有相同ID的div）：

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

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

Answer 2

使用z-index css属性。

#baselineImage
{
    height:10px;
    width:100%;
    position:relative;
    top:-6;
    z-index:-1;
}