bring a Div on top of the IFrame

[nkrishnan1978]

Hi,
I have an application where I have used a IFrame to display the editable contents of my application. the Mainmenu is outside the IFrame and on clicking any menu options in the main menu it changes the contents inside the IFrame. the application is built on asp.net 4.0. On the Parent HTML page when the mainmenu is present i have placed a div which is used to overlay the entire page when the user session is timed out. this overlay feature works fine with out IFrame, but it is not able to push the IFrame and its content to back. I even tried using the z-index properties to push the content back but still it is of no use.
I wanted to bring a Div (It contains an image) on top of the IFrame.
Please find the JQuery code which is getting called on Session Timeout of the logged in user.
function OnTimOut() {
$(“#AppIFrame”).css(‘z-index’, ‘-10000000’);// reducing the Z-index for the iFrame
$(‘#overlay’).fadeIn(‘medium’, function () {
$(‘#box’).animate({
‘top’: ‘160px’,
‘zoom’: ‘1’,
‘filter’: ‘alpha(opacity=50)’,
‘opacity’: ‘1’,
‘z-index’: ‘500000000000000000’
}, 500);
});
$(‘#overlay’).css(“display”, “block”);
$(“html”).addClass(“overlay”);
$(“html”).css(“overflow”, “hidden”);
}

Any help would be much appreciated.

[Senff]

You’ll need to show the CSS in order for us to find out what could be wrong.

In general, it shouldn’t be a problem to have a DIV placed on top of an iFrame: http://codepen.io/senff/pen/wpFiz

[JTParrett]

For z-index to work properly you will need both elements to be positioned either relative or absolute.

Is the issue repeated in all browsers?

[JTParrett]

Or position fixed*

[Author]

Posts