zIndex test

This page tests a variety of z-index situations to show how they behave in different browsers. divs are color-coded and labeled with their z-index.

1. 4 siblings with no z-index set. All browsers tested (IE7, IE8, and Firefox 2) render the each div in front of the previous div.

2. 4 siblings with different z-indexes. All browsers tested render divs with the higher z-index in front of those with the lower z-index.

   1

   3

   2

   4

3. 2 parent divs with no z-index set, each with 2 child divs with different z-indexes. Firefox and IE8 render the second parent in front of the first and the children in order of their z-index. IE7 renders the first parent and all its children behind the second parent and all its children.

   1

   3

   2

   4

4. 2 parent divs with different z-indexes, each with 2 child divs with different z-indexes. All browsers tested render the first parent and all its children in front of the second parent and all its children.

   2

   1

   3

   1

   2

   4

5. 2 parent divs with z-indexes of 0, each with 2 child divs with different z-indexes. Firefox and IE7 render the second parent and its children in front of the first parent and its children. IE8 renders like test 3, with the children of different parents interleaved.

   0

   1

   3

   0

   2

   4