paint-order-ref.html (737B)
1 <!DOCTYPE html> 2 <style> 3 #scope { 4 position: relative; width: 200px; height: 100px; 5 background: white; contain: strict; 6 } 7 #nonpart1 { 8 position: absolute; top: 40px; left: 20px; 9 width: 50px; height: 50px; background: #a4f; 10 } 11 #nonpart2 { 12 position: absolute; top: 20px; left: 30px; 13 width: 50px; height: 50px; background: #f88; 14 } 15 #vt { 16 position: relative; width: 200px; height: 100px; 17 top: -100px; background: rgba(0, 0, 0, 0.1); 18 will-change: transform; 19 } 20 #part { 21 position: absolute; top: 30px; left: 50px; 22 width: 50px; height: 50px; background: #8cf; 23 } 24 25 </style> 26 <div id=scope> 27 <div id=nonpart1></div> 28 <div id=nonpart2></div> 29 </div> 30 <div id=vt> 31 <div id=part></div> 32 </div>