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