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_1going 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
Post a Comment