html - How can I stack this Z-index configuration? -

i have situation whereby:

my hierarchy is:

box1: (z-index: 5000)   -(other parent elements)     -box1_child (z-index: 5001) box2 (z-index: 5000)   -(other parent elements)     -box2_child (z-index: 5002) 

so obviously, want box1 , box2 @ same level. want box1_child sit on box2. want box2_cihld sit on box1_child.

but it's not working (in ff4), basically, box1_child isn't sitting on box2.

is possible, (on more recent browsers?)

all elements have non-static position.

even if 2 adjacent elements have same z-index, still have stacking order: 1 comes later drawn on first.

using this, can use css (simplified) stack elements in way want.

#box1{     position: absolute;     z-index:auto; } #box1_child {     position: absolute;     z-index:1; } #box2{     position: absolute;     z-index:auto; } #box2_child {     position: absolute;     z-index:1; } 

then box2 drawn on over box1 (if overlap @ all) , box2_child drawn on box1_child, both children drawn on parent boxes.

jsfiddle.

tested on various newer browsers. don't have firefox 4 here, can't confirm doesn't work there.

edit: seems wrong in assumption z-index:0 same auto. indeed doesn't work 0, won't work 5000 either. apologies.