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