I have below code that appends a DIV to a different DIV based on some action.

$(".personalizeflyout").prependTo("#personalizemenuitem");

$(".personalizeflyout").show();

After I show the DIV I am placing an iFrame at exact same coordinates as the personalizeflyout DIV with same width and height. Code below:

$(".personalizeflyout").iFrameShim({"toppadding":60, "leftpadding":0});

jQuery.fn.iFrameShim = function() {

var o = $(this[0]) // It's your element

var args = arguments[0] || {};

var itop = args.toppadding || 0;

var ileft = args.leftpadding || 0;

$(".iFrameShimmer").attr("height",o.height());

$(".iFrameShimmer").attr("width",o.width());

$(".iFrameShimmer").css("top",o.offset().top + itop);

$(".iFrameShimmer").css("left",o.offset().left + ileft);

}

This is the CSS for personalizeflyout (notice z-index 10)

.personalizeflyout {

margin: 0 auto;

padding: 7px 0 0 0;

width:434px;

position: absolute;

z-index:10;

display:none;

}

And then I have iFrame with below CSS.

.iFrameShimmer {

position:absolute;

top: 400;

left: 200;

z-index:1;

}

Issue Description:

The z-index of iFrame and DIV seems to be getting messed up when I use the above code.

But if I dont do the appendTo and run the rest of the code, the DIV is properly overlayed on top of the iFrame. Also works when I dynamically show the DIV by using show() method. I have ran some trial and errors and seems like the z-index is getting messed up when I use the appendTo or prependTo methods to attach DIV to another DIV and then place it absolutely at some location.

I also tested this in version 1.6.4 and the issues exists.

Please assist.

Thanks,

Sridhar