position-area-percents-001.html (1410B)
1 <!DOCTYPE html> 2 <title>Percentage inset/margin/padding in position-area</title> 3 4 <link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area"> 5 <link rel="match" href="position-area-percents-001-ref.html"> 6 <link rel="author" name="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 7 8 <style> 9 .container { 10 width: 100px; height: 100px; 11 border: solid gray; 12 margin: 6px; 13 position: relative; 14 float: left; 15 } 16 17 .anchor { 18 position: absolute; 19 background: silver; 20 inset: 20px 20px 40px 20px; 21 /* Makes bottom center-right area 80px wide by 40px tall */ 22 anchor-name: --foo; 23 } 24 25 .anchored { 26 border: solid blue 2px; 27 position: absolute; 28 position-anchor: --foo; 29 position-area: bottom span-right; 30 place-self: stretch; 31 inset: 20% 0 0 20%; 32 margin: 0 5% 5% 0; 33 padding: 10%; 34 background: content-box aqua; 35 } 36 </style> 37 38 <div class=container> 39 <div class="anchor"></div> 40 <div class="anchored"></div> 41 </div> 42 43 <div class=container> 44 <div class="anchor"></div> 45 <div class="anchored" style="writing-mode: vertical-rl"></div> 46 </div> 47 48 <div class=container style="writing-mode: vertical-rl"> 49 <div class="anchor"></div> 50 <div class="anchored"></div> 51 </div> 52 <div class=container style="writing-mode: vertical-rl"> 53 <div class="anchor"></div> 54 <div class="anchored" style="writing-mode: horizontal-tb"></div> 55 </div>