nested-scope-ref.html (638B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 6 .box { position: relative; contain: strict; } 7 #scopeA { background: #ccc; 8 left: 0; top: 0; width: 300px; height: 300px; } 9 #partA { background: #4af; 10 left: 30px; top: 30px; width: 240px; height: 240px; } 11 #scopeB { background: #eee; 12 left: 30px; top: 30px; width: 180px; height: 180px; } 13 #partB { background: cyan; 14 left: 30px; top: 30px; width: 120px; height: 120px; } 15 16 </style> 17 </head> 18 <body> 19 <div id=scopeA class=box> 20 <div id=partA class=box> 21 <div id=scopeB class=box> 22 <div id=partB class=box> 23 </div> 24 </div> 25 </div> 26 </div> 27 </body> 28 </html>