| <!DOCTYPE html> |
| <!-- |
| | This test checks that items with negative z-indices appear underneath |
| | both elements that are not positioned as well as positioned elements with |
| | z indices of 0 and greater. |
| | Of the 5 boxes, red is not positioned, every other box is. The order of |
| | appearance of the boxes should be grey, black, red, green, blue, from back |
| | to front. |
| | https://www.w3.org/TR/CSS21/visuren.html#z-index |
| --> |
| <html> |
| <head> |
| <style> |
| .green, .blue, .grey, .black { |
| position: absolute; |
| width: 100px; |
| height: 100px; |
| } |
| .red { |
| width: 100px; |
| height: 100px; |
| background-color: rgb(255, 100, 100); |
| } |
| .green { |
| left: 60px; |
| top: 60px; |
| background-color: rgb(100, 255, 100); |
| } |
| .blue { |
| left: 80px; |
| top: 80px; |
| background-color: rgb(100, 100, 255); |
| z-index: 1; |
| } |
| .grey { |
| left: 20px; |
| top: 20px; |
| background-color: rgb(150, 150, 150); |
| z-index: -2; |
| } |
| .black { |
| left: 40px; |
| top: 40px; |
| background-color: rgb(0, 0, 0); |
| z-index: -1; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="blue"></div> |
| <div class="green"></div> |
| <div class="red"></div> |
| <div class="black"></div> |
| <div class="grey"></div> |
| </body> |
| </html> |