position-area-abs-inline-container.html (1285B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: position-area positioning with absolute inline container</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area"> 4 <link rel="match" href="position-area-inline-container-ref.html"> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 6 <style> 7 #in-flow { 8 font-family: Ahem; 9 font-size: 100px; 10 line-height: 1; 11 color: orange; 12 } 13 #inline-container { 14 position: absolute; 15 } 16 #anchor { 17 position: absolute; 18 top: 25px; 19 left: 100px; 20 width: 200px; 21 height: 50px; 22 anchor-name: --anchor; 23 background-color: cyan; 24 } 25 .anchored { 26 position: absolute; 27 align-self: stretch; 28 justify-self: stretch; 29 position-anchor: --anchor; 30 background-color: blue; 31 } 32 #top-left { position-area: top left; } 33 #top-right { position-area: top right; } 34 #bottom-left { position-area: bottom left; } 35 #bottom-right { position-area: bottom right; } 36 </style> 37 <div id="in-flow"> 38 <br> 39 <br> 40 <span id="inline-container">XXXX<span id="anchor"></span><div id="top-left" class="anchored"></div><div id="top-right" class="anchored"></div><div id="bottom-left" class="anchored"></div><div id="bottom-right" class="anchored"></div></span> 41 </div>