flexbox-paint-ordering-003.html (1617B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title>CSS Test: Testing that paint order isn't influenced 9 by "order" for absolutely positioned flex children</title> 10 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 11 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#abspos-items"> 12 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"> 13 <link rel="match" href="flexbox-paint-ordering-003-ref.html"> 14 <style> 15 .container { display: flex; } 16 .absPosLowOrder { 17 position: absolute; 18 order: 5; 19 background: red; 20 height: 0; 21 width: 0; 22 } 23 .absPosHighOrder { 24 position: absolute; 25 order: 10; 26 height: 0; 27 width: 0; 28 } 29 .redBlock { 30 height: 100px; 31 width: 100px; 32 background: red; 33 } 34 .limeBlock { 35 height: 100px; 36 width: 100px; 37 background: lime; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="container"> 43 <!-- Note: The following elements will be superimposed. If they weren't 44 positioned, then they'd be flex items, and their relative "order" 45 values would force the first one (with the red child) to paint on top. 46 But since they're absolutely positioned, they're not flex items & 47 "order" has no effect, and so the lime one should end up on top. --> 48 <div class="absPosHighOrder"><div class="redBlock"></div></div> 49 <div class="absPosLowOrder"><div class="limeBlock"></div></div> 50 </div> 51 </body> 52 </html>