zIndex issue with pdf inside iframe in IE

I have a custom HTML handler in my .net project which displays PDF files, In chrome and other browsers it shows properly but in ie the z-index of PDF is above all other stacked elements. I mean when I scroll, the pdf in iframe is coming over my menu and other fixed elements.

Solution

I was having this same issue with any free floating elements on the page in IE, this function fixes the issue.

function fixPDFzIndexIssue (idToFix) {
    if(!idToFix) return "Please provide the id of the div to fix";

    var $divToFix = $('#' + idToFix);

    $divToFix.wrap("<div class='outer'></div>");

    $(".outer").append("<iframe src='about:blank' class='cover'>");
    $(".cover").css({
        'min-width': '100%',
        'min-height': '100%',       
        'overflow': 'hidden',
        'position': 'absolute',
        'border': 'none',
        'left': 0,
        'top':0,
        'z-index': -1
    });
}

It seems that any div that is hovering over a PDF requires an iFrame to be placed underneath it so that it renders over the PDF.