In the following four test cases there are two relative boxes (with light red and blue semitransparent background), partially overlapping (the second has a negative top margin.) Each contains an absolute child box (with solid red and blue background), positioned to create some overlapping.

  1. No z-index specified (auto): The boxes should be stacked according to source order
  2. z-index 1 on red child: It should be stacked above the blue boxes. Doesn't work in IE7-
  3. z-index 1 on light red parent: The red boxes should be stacked above the blue boxes. OK in IE7-
  4. The first parent has an additional (green) child. All the three children have a z-index (green 1, blue 2, red 3), they should be stacked according to these z-index values. Doesn't work in IE7-: The children of the first parent are always stacked below those of the second one.

In the following case the parent boxes are not relative, there are intermediate relative child boxes, with z-index 1 on the one in the red parent. This allows to get also in IE7- the desired visual result of case 2 above: solid red box above the blue boxes without its ancestor (now grand-parent) being above them.

CSS tests home