通過jQuery把孩子放在父母身上z-index

Question

我有一種情況，我想將一個孩子項目放在之上它是父母，但這在某種程度上似乎是不可能的。對於一個快速的情況檢查，看看這個例子

http://jsfiddle.net/Mr3bH/

當我將鼠標懸停在父，我認爲我重新定義的孩子CSS設置（從它的父刪除元素，所以要去除父>子關係）通過管線

$('#e11').fadeIn().css({position:'absolute',left:'50px',bottom:0,zIndex:15});

如可在例如的jsfiddle可以看出，我想元件#e11懸停上述#e1和#e2元件。

有人知道解決方案或解決方法嗎？

Answer 1

z-index css屬性的行爲起初並不是很容易掌握，因爲涉及到幾個規則 - 在您的情況下，更改z-index並不足夠，因爲您的每個絕對定位元素都是div div使用z-index屬性創建新的堆疊上下文，這是一種「層」，其包含的元素的z索引僅在相同的堆棧上下文中有效。

的一對就這一問題提供一些更深入的文章：

• http://www.vanseodesign.com/css/css-stack-z-index/
• https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_1

讓我們回到你的例子，如果你的div刪除的z-index，只留下你通過jQuery明確設置的那個，你會發現它會起作用。

（請記住，很可能某些瀏覽器的行爲不如預期，因爲存在 - 或曾經是 - 關於不同broswers之間z-index屬性的解釋的不少異常）