Position iframe content above all content

Question

I need to display an iframe when a user clicks on a link on header of page. How do I make sure the iframe is always on top of all content? CSS z-indexs don't work effectively in this case.

Answer 1

z-index probably doesn't work because your iframe is not a positioned box:

For a positioned box, the 'z-index' property specifies:

1. The stack level of the box in the current stacking context.
2. Whether the box establishes a local stacking context.

Set its position to something other than static. For example:

iframe#myiframe {
    z-index: 20;
    position: absolute;
}

Answer 2

z-index only works on positioned content. Either use position:absolute; and top/left/right to position the element or use position:relative; to leave the element where it is.

Either one should enable z-index on the element.

Answer 3

The issue I am having is that the position:fixed does not work in IE7. I am wrapping my iframe in a div but that goes behind other content on the page in IE7. Also I cannot modify the properties of the underlying divs. I can only change the property of the new iframe or wrap it in a div. Any other suggestions ?