CODEWITHSUNDEEP
javascripthtmlcss
egbrad
egbrad

Reputation: 2417

position:relative moving image to foreground

I am trying to implement a Comodo trust logo on my site. It is an image that when you mouse over it, it pops up an iframe with some security info about the site. The code to do this comes from a third party.

The problem comes when the logo is near a relatively positioned image. The image shows up on top of the iframe. If I remove position:relative; from my footer image, the iframe shows up on top of the image. I can't just remove relative positioning though, because it throws off the look of the rest of the page.

I've distilled the issue into a jsFiddle HERE.

Upvotes: 0

Views: 560

Answers (2)

Avin Varghese
Avin Varghese

Reputation: 4370

Use z-index css property.

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

http://jsfiddle.net/SCSFP/1/

Upvotes: 1

ajm
ajm

Reputation: 20105

The trust logo is injecting a div into the page with a z-index set to 0, so essentially it's being placed behind everything else (including your image).

Changing the z-index to any other positive integer will change the iframe's stacking order and place it on top of the image (as long as its higher than your image's z-index, which is 1 unless explicitly set).

Adding this to your stylesheet should do the trick (assuming that logo always generates a div with the same ID):

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

Note that the div containing the frame has its z-index set via an inline style, so you will need to make sure that's overridden properly.

Upvotes: 3

Related Questions