position-area-justify-self-safe-001.html (1314B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 4 <title>CSS Anchor Positioning: default anchor-center alignment is safe</title> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-area-alignment"> 6 <link rel="help" href="https://www.w3.org/TR/css-align-3/#auto-safety"> 7 <link rel="match" href="position-area-justify-self-safe-001-ref.html"> 8 9 <style> 10 .container { 11 width: 100px; 12 height: 50px; 13 border: 1px solid gray; 14 margin: 10px; 15 position: relative; 16 } 17 18 .anchor { 19 width: 10px; 20 height: 10px; 21 top: 30px; 22 position: absolute; 23 background: blue; 24 anchor-name: --a; 25 } 26 27 .anchored, .anchored2 { 28 width: 50px; 29 height: 20px; 30 position: absolute; 31 position-area: top; 32 position-anchor: --a; 33 background: green; 34 } 35 36 .anchored2 { 37 margin: 0 10px; 38 } 39 </style> 40 41 <div class=container> 42 <div class=anchor style="left: 10px"></div> 43 <div class=anchored></div> 44 </div> 45 46 <div class=container> 47 <div class=anchor style="left: 45px"></div> 48 <div class=anchored></div> 49 </div> 50 51 <div class=container> 52 <div class=anchor style="left: 80px"></div> 53 <div class=anchored></div> 54 </div> 55 56 <div class=container> 57 <div class=anchor style="left: 5px"></div> 58 <div class=anchored2></div> 59 </div> 60 61 <div class=container> 62 <div class=anchor style="left: 85px"></div> 63 <div class=anchored2></div> 64 </div>