In all the following test cases there are two relative boxes (with light red and blue semitransparent background), partially overlapping (the second has a negative top.) Each contains an absolute child box (with solid red and blue background), positioned to create some overlapping.
- No z-index specified (auto): The boxes should be stacked according to the source order.
- z-index:1 on the red child: It should be stacked above the blue boxes. Doesn't work in IE7- (where all positioned elements seem to form a stacking context). OK in IE8b1.
- z-index:1 on the light red parent: The red boxes should be stacked above the blue boxes.
- z-index:0 on the light red parent, and z-index:1 on its child. Now the light red box should form a stacking context, so its child should stay inside this context. The stacking should be the same as in case 1. Does not work correctly in IE8b1 where z-index:0 does not seem to form a stacking context and this case is rendered as case 2.
CSS tests home