jquery - 問題與appendTo方法，並可能搞亂Z-索引的DIV被追加

請幫助我與以下問題，如果你看到它發生之前，已經掙扎了相當一段時間。我有下面的代碼，基於某些操作將DIV附加到不同的DIV，然後將顯示切換爲可見。jquery - 問題與appendTo方法，並可能搞亂Z-索引的DIV被追加

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

之後我告訴我把一個iFrame在完全相同的座標與相同的寬度和高度personalizeflyout DIV的DIV。下面的代碼：

$(".personalizeflyout").iFrameShim(); 
jQuery.fn.iFrameShim = function() { 
    var o = $(this[0]); 
    $(".iFrameShimmer").attr("height",o.height()); 
    $(".iFrameShimmer").attr("width",o.width()); 
    $(".iFrameShimmer").css("top",o.offset().top); 
    $(".iFrameShimmer").css("left",o.offset().left); 
}

這是personalizeflyout的CSS（通知的z-index 10）

.personalizeflyout { 
margin: 0 auto; 
padding: 7px 0 0 0; 
width:434px; 
position: absolute; 
z-index:10; 
display:none; 
}

然後我的iFrame下面CSS。

.iFrameShimmer { 
position:absolute; 
top: 400; 
left: 200; 
z-index:1; 
}

問題描述： DIV的z指數似乎越來越搞砸了，當我使用上面的代碼。但是，如果我不使用appendTo並運行代碼的其餘部分，即切換顯示以顯示和放置具有相同尺寸和位置屬性的iFrame，則DIV會正確覆蓋在iFrame頂部。我正在嘗試各種事情，但沒有線索，爲什麼appendTo或prependTo方法附加DIV導致問題。我使用FireBug進行了測試，並且Z-index顯示爲我設置的內容。我也明確地設置了所有在iFrameShim方法中的代碼後的DIV和iFrame z-Index，這似乎沒有任何區別。

我也在1.6.4版本中測試過這個問題，並且存在問題。順便說一句我正在使用版本1.3.x

來源

2011-12-14 user1098829

Z索引僅適用於父元素有位置設置位置。因此，如果＃個人化選擇菜單沒有在CSS中指定的位置，瀏覽器將不會尊重您嘗試爲.personalizeflyout和.iFrameShimmer設置的z-index。

來源

2011-12-14 22:59:57

感謝您的回覆。 #personalizemenuitem已經擁有位置屬性集。然而，我將位置屬性應用於所有其父元素直到正文，並沒有任何區別。想知道如果你能建議我檢查其他東西... 謝謝， – user1098829 2011-12-15 00:21:57

jquery - 問題與appendTo方法，並可能搞亂Z-索引的DIV被追加

回答

相關問題