Skip to main content

Bug Tracker

Side navigation

#11026 closed bug (invalid)

Opened December 14, 2011 10:39PM UTC

Closed December 30, 2011 08:04AM UTC

Last modified March 14, 2012 09:43AM UTC

issue with appendTo/prependTo and z-index

Reported by: sridhar.ravuri@gmail.com Owned by: sridhar.ravuri@gmail.com
Priority: undecided Milestone: None
Component: unfiled Version: 1.3.2
Keywords: Cc:
Blocked by: Blocking:
Description

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

Attachments (0)
Change History (2)

Changed December 15, 2011 10:57AM UTC by sindresorhus comment:1

owner: → sridhar.ravuri@gmail.com
status: newpending

Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket.

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/FrKyN/ Open the link and click to "Fork" (in the top menu) to get started.

Changed December 30, 2011 08:04AM UTC by trac-o-bot comment:2

resolution: → invalid
status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!