Поместите ребенка над родителем с z-index через jQuery

Question

У меня возникла ситуация, когда я хочу поместить дочерний элемент поверх, это его родитель, но это как-то кажется невозможным. Для быстрой проверки ситуации, увидеть этот пример

http://jsfiddle.net/Mr3bH/

Когда я парить родитель, я предположил, что я заново определить параметры ребенка CSS (удалить элемент из его родителей, так чтобы удалить родительский> ребенка отношение) через линию

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

Как можно видеть в jsfiddle Например, я хочу элемент #e11 парить над #e1 и #e2 элементов.

Кто-нибудь знает решение или обход?

Answer 1

Поведение свойства s-index css не так-то просто понять, так как существует несколько правил - в вашем случае изменение индекса z не является достаточным, поскольку каждый из ваших абсолютно позиционированных элементов 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

Возвращаясь к вашему примеру, если удалить Z-индекс от дивы, оставляя только тот, который вы задаете явно через jQuery, и вы увидите, что он будет работать.

(имейте в виду, что это вполне возможно, что некоторые браузер не ведут себя, как и ожидалось, так как есть - или раньше - довольно много аномалий относительно интерпретации г-индексного собственности между различными broswers)