top-layer-nesting-ref.html (781B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 .pseudodialog { 6 height: 150px; 7 width: 150px; 8 position: absolute; 9 top: 0; right: 0; bottom: 0; left: 0; 10 margin: auto; 11 border: solid; 12 padding: 1em; 13 background: white; 14 color: black; 15 } 16 </style> 17 </head> 18 <body> 19 This tests that top layer elements are stacked correctly even if nested in the DOM tree. 20 The test passes if you see no red rectangles and see 3 rectangles stacked in the following order (from bottom to top): yellow, blue, green. 21 22 <div class="pseudodialog" style="top: 100px; background-color: yellow"></div> 23 <div class="pseudodialog" style="top: 150px; left: 50px; background-color: blue"></div> 24 <div class="pseudodialog" style="top: 200px; left: 100px; background-color: green"></div> 25 </body> 26 </html>