位置：相對移動圖像到前景

我試圖在我的網站上實現Comodo信任標誌。這是一個圖像，當你將鼠標懸停在它上面時，它會彈出一個iframe，其中包含有關該網站的一些安全信息。執行此操作的代碼來自第三方。位置：相對移動圖像到前景

問題出現在徽標靠近相對定位的圖像時。該圖片顯示在iframe之上。如果我從頁腳圖像中刪除position:relative;，則iframe會顯示在圖像的頂部。雖然我不能移除相對定位，因爲它拋棄了頁面其餘部分的外觀。

我把這個問題提煉成了一個jsFiddle HERE。

2012-11-27 indot_brad

信任標誌將div注入頁面，其中z-index設置爲0，所以本質上它被放置在其他所有內容（包括圖像）的後面。

改變z-index任何其他正整數會改變iframe的堆疊順序，並將其放置在圖像的頂部（只要它高於你的形象的z-index，這是1，除非明確）。

此添加到您的樣式應該做的伎倆（假設標誌總是生成具有相同ID的div）：

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

注意，包含幀的div有z-index通過內嵌樣式設置，所以你需要確保正確覆蓋。

2012-11-27 17:27:28 ajm

謝謝你，我從來沒有聽說過的'！important'之前。這非常方便。 –

明智地使用它！這是迫使規則儘可能具有最高特異性的好方法，但它也使規則極其難以覆蓋。只能在非常特殊的情況下使用它！ – ajm

使用z-index css屬性。

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

2012-11-27 17:27:58

回答