CODEWITHSUNDEEP
javascripthtmliframe
Iris
Iris

Reputation: 1341

Position iframe content above all content

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.

Upvotes: 2

Views: 8629

Answers (2)

tgecho
tgecho

Reputation: 434

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.

Upvotes: 0

strager
strager

Reputation: 90012

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;
}

Upvotes: 4

Related Questions