Question

Basically I have an IFRAME that displays a given page. I want to position a number of DIVs on top of specific elements within this IFRAME. I am not able to edit the CSS of the IFRAME source page.

Currently, I am using jQuery to append the DIVs within the IFRAME:

$('#portal').contents().find('.callout').append('<div class="overlay">Test</div>');

(#portal is the IFRAME, .callout is the target DIV)

So now I just need div.overlay to be displayed on top of / over the target DIV. Is this possible to do?

Answer 1

Yes, you could position the element absolute or relative to a container, then set the position accordingly.

.overlay {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1;
}