Place child over parent with z-index via jQuery -



Place child over parent with z-index via jQuery -

i have situation want place kid item over it's parent, somehow seems impossible. quick situation check, see example

http://jsfiddle.net/mr3bh/

when hover parent, assumed re-defined kid css settings (remove element parent, remove parent>child relation) via line

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

as can seen in jsfiddle example, want element #e11 hover above #e1 , #e2 elements.

does know solution or workaround?

the behaviour of z-index css property not easy grasp @ first, since there several rules involved - in case changing z-index not enought since each of absolutely positioned div element z-index property creates new stacking context, sort of "layer", , z-index of contained elements valid in same stacking context.

a pair of articles provide more insight on matter:

http://www.vanseodesign.com/css/css-stack-z-index/ https://developer.mozilla.org/en-us/docs/css/understanding_z-index/stacking_context_example_1

going example, if remove z-index divs, leaving 1 set explicitly through jquery, , you'll see work.

(keep in mind possible browser not behave expected since there - or used - quite few anomalies regarding interpretation of z-index property between different broswers)

jquery

Comments

Popular posts from this blog

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer -

Accessing MATLAB's unicode strings from C -

javascript - mongodb won't find my schema method in nested container -