auto-margins-position-area-ref.html (1533B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: position-area vs margins</title> 3 <style> 4 .container { 5 position: absolute; 6 width: 400px; 7 height: 400px; 8 margin: 0 auto; 9 border: 2px solid; 10 } 11 .anchor { 12 margin-top: 100px; 13 margin-left: 100px; 14 width: 150px; 15 height: 75px; 16 anchor-name: --anchor; 17 border: solid 1px; 18 } 19 20 .anchored { 21 position: absolute; 22 position-anchor: --anchor; 23 width: 20px; 24 height: 20px; 25 border: solid 1px; 26 opacity: 30%; 27 margin: 0; 28 } 29 </style> 30 <div class="container"> 31 <div class="anchored" style="background: silver; inset: auto 0 0 auto;"></div> 32 <div class="anchored" style="position-area: span-all; background: maroon"></div> 33 <div class="anchored" style="position-area: top center; background: orange"></div> 34 <div class="anchored" style="position-area: left center; background: yellow"></div> 35 <div class="anchored" style="position-area: bottom right; background: lime"></div> 36 <div class="anchored" style="position-area: span-right; background: green"></div> 37 <div class="anchored" style="position-area: span-bottom; background: teal"></div> 38 <div class="anchored" style="position-area: right; background: blue"></div> 39 <div class="anchored" style="position-area: bottom; background: purple"></div> 40 <div class="anchored" style="align-self: anchor-center; background: fuchsia; right: 0"></div> 41 <div class="anchored" style="justify-self: anchor-center; background: aqua; bottom: 0"></div> 42 <div class="anchor"></div> 43 </div>