overflow-scroll-float-paint-order.html (1103B)
1 <!DOCTYPE html> 2 <title>Overflow:scroll floating paint order</title> 3 <link rel="help" href="https://www.w3.org/TR/CSS2/zindex.html"> 4 <link rel="match" href="overflow-scroll-float-paint-order-ref.html"> 5 <style> 6 #scroller { 7 float: left; 8 background: red; 9 padding: 20px; 10 box-sizing: border-box; 11 width: 100px; 12 height: 100px; 13 overflow: scroll; 14 } 15 #negative-margin { 16 float: left; 17 width: 100px; 18 height: 100px; 19 background: green; 20 margin-left: -100px; 21 } 22 #foreground1 { 23 display: inline-block; 24 width: 50px; 25 height: 50px; 26 background: blue; 27 } 28 #foreground2 { 29 display: inline-block; 30 width: 50px; 31 height: 50px; 32 background: magenta; 33 } 34 </style> 35 <!-- The paint order should be: 36 scroller background (invisible) 37 scroller child background (invisible) 38 foreground1 (invisible) 39 negative-margin background (visible) 40 foreground2 (visible) 41 --> 42 <div id="scroller"> 43 <div style="height: 200px; background: yellow"> 44 <div id="foreground1"></div> 45 </div> 46 </div> 47 <div id="negative-margin"> 48 <div id="foreground2"></div> 49 </div>