content-ref.html (629B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 6 body { margin: 20px } 7 #scope { 8 position: relative; z-index: 0; background: pink; 9 border: 5px dashed purple; padding: 5px; 10 width: 180px; height: 120px; 11 } 12 #part { 13 position: relative; z-index: 0; background: lightgrey; 14 border: 5px solid blue; padding: 5px; 15 width: 120px; height: 60px; 16 left: 20px; top: 20px; 17 view-transition-name: foo; 18 } 19 20 #scope-client-area { 21 position: absolute; inset: 0; padding: 5px; 22 background: yellow; 23 } 24 25 </style> 26 </head> 27 <body> 28 <div id=scope> 29 <div id=scope-client-area> 30 <div id=part> 31 PARTICIPANT 32 </div> 33 </div> 34 </div> 35 </body> 36 </html>