Grow your CSS skills. Land your dream job.

bring a Div on top of the IFrame

  • # April 23, 2013 at 8:29 am

    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.

    # April 23, 2013 at 8:43 am

    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

    # April 25, 2013 at 12:16 pm

    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?

    # April 25, 2013 at 12:46 pm

    Or position fixed*

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".