Overlay DIV over an iframe ?

Can i have an overlay DIV over an iframe?!

 

To my knowledge, no you cannot. I would love to be proved wrong though.

 

I believe it can be done, you just need to use the 'Position' property and specify where the div will be located using 'Top and Left'

Example

.overlay {
  position:absolute;
  top:200px;
  left:100px;
}

<div class="overlay">What ever goes here?</div>

Code (markup):

I have tried this and it does work in ie and ff

 

z-index'es (which you'll need to set) on iframe's don't go back past IE 5.5. It depends on how compatible you want your site I suppose.

 

You shouldn't need to use z-indexes for this, so long as you are not absolutely positioning the iframe as well.

 

I seem to remember running into an issue when trying to do this myself. I'm not 100% sure, but there's something about this that's very familiar and I think there was an issue I couldn't overcome when placing an element on top of an iframe.

Hopefully our resident guru kk5st can chime in.

 

Gary, helloooo? Busy enjoying that SS income... fishing or something.

Yeah, would be nice, but so far I agree with Greg, at least in IE you cannot position anything, even with a z-index of a bajillion, over an iFrame for the same reason you cannot get things on top of form controls, or Flash. The iFrame since IE5 and Flash (I think) get started on a whole other "layer"... like another page over the original page. So the bottom page (with all the rest of the HTML) can never get higher.

I would think that in the smarter browsers, zoals FF, Opera, and Saffy, you CAN set a div (with a z-index of a bajillion) over an iFrame, but I don't work with the things so don't quote me on it... but with IE, you'd need another iFrame with this div instead.

 

YOu can do it over flash adding wmode="transparent" to flash code, but I can't make it over iframe too.

 

shit, I thought the thread date was May 13th 2009