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.
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.
Share Improve this question edited Mar 25, 2009 at 22:40 Dan Lew 87.5k33 gold badges184 silver badges176 bronze badges asked Mar 25, 2009 at 22:31 IrisIris 1,3514 gold badges17 silver badges19 bronze badges2 Answers
Reset to default 4z-index probably doesn't work because your iframe is not a positioned box:
For a positioned box, the 'z-index' property specifies:
- The stack level of the box in the current stacking context.
- 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;
}
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.