position-area-anchor-001-ref.html (1684B)
1 <!DOCTYPE html> 2 <title>anchor() resolution in position-area</title> 3 4 <style> 5 .container { 6 width: 100px; height: 100px; 7 border: solid gray; 8 margin: 6px; 9 position: relative; 10 anchor-scope: all; 11 float: left; 12 } 13 14 .block { 15 background: silver; 16 height: 40px; 17 width: 40px; 18 margin: 10px; 19 } 20 21 .anchor { 22 position: absolute; 23 border: solid orange; 24 margin: 25px; 25 } 26 .controls .anchor, 27 .pull-up .anchor { 28 width: 5px; 29 height: 5px; 30 } 31 .push-down .anchor { 32 width: 40px; 33 height: 40px; 34 } 35 36 .anchored { 37 border: solid blue; 38 position: absolute; 39 inset: 0; 40 place-self: stretch; 41 } 42 43 body > div { clear: both; } 44 </style> 45 46 <div class=pull-up> 47 <div class=container> 48 <div class=anchor></div> 49 <div class=block></div> 50 <div class=anchored style="top: 36px; left: 36px;"></div> 51 </div> 52 53 <div class=container> 54 <div class=anchor></div> 55 <div class=block></div> 56 <div class=anchored style="top: 36px; left: 50px;"></div> 57 </div> 58 </div> 59 60 <div class=push-down> 61 <div class=container> 62 <div class=anchor></div> 63 <div class=block></div> 64 <div class=anchored style="top: 71px; left: 71px"></div> 65 </div> 66 67 <div class=container> 68 <div class=anchor></div> 69 <div class=block></div> 70 <div class=anchored style="top: 71px; left: 50px"></div> 71 </div> 72 </div> 73 74 <div class=controls> 75 <div class=container> 76 <div class=anchor></div> 77 <div class=block></div> 78 <div class=anchored style="top: 36px"></div> 79 </div> 80 <div class=container> 81 <div class=anchor></div> 82 <div class=block></div> 83 <div class=anchored style="top: 25px; left: 36px"></div> 84 </div> 85 </div>