position-area-justify-self-safe-001-ref.html (1036B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 4 <title>CSS Anchor Positioning reference</title> 5 6 <style> 7 .container { 8 width: 100px; 9 height: 50px; 10 border: 1px solid gray; 11 margin: 10px; 12 position: relative; 13 } 14 15 .anchor { 16 width: 10px; 17 height: 10px; 18 top: 30px; 19 position: absolute; 20 background: blue; 21 } 22 23 .anchored { 24 width: 50px; 25 height: 20px; 26 top: 10px; 27 position: absolute; 28 background: green; 29 } 30 </style> 31 32 <div class=container> 33 <div class=anchor style="left: 10px"></div> 34 <div class=anchored style="left: 0px"></div> 35 </div> 36 37 <div class=container> 38 <div class=anchor style="left: 45px"></div> 39 <div class=anchored style="left: 25px"></div> 40 </div> 41 42 <div class=container> 43 <div class=anchor style="left: 80px"></div> 44 <div class=anchored style="left: 50px"></div> 45 </div> 46 47 <div class=container> 48 <div class=anchor style="left: 5px"></div> 49 <div class=anchored style="left: 10px"></div> 50 </div> 51 52 <div class=container> 53 <div class=anchor style="left: 85px"></div> 54 <div class=anchored style="left: 40px"></div> 55 </div>