anchor-center-safe.html (1234B)
1 <!doctype html> 2 <title>Tests whether safe alignment works correctly on the anchor element.</title> 3 <link rel="match" href="anchor-center-safe-ref.html"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-center"> 5 <style> 6 .anchor { 7 position: fixed; 8 left: 0px; 9 top: 0px; 10 height: 30px; 11 color: white; 12 background-color: green; 13 anchor-name: --myAnchor; 14 } 15 .infobox { 16 color: darkblue; 17 background-color: azure; 18 border: 1px solid #ddd; 19 padding: 10px; 20 position: fixed; 21 position-anchor: --myAnchor; 22 top: calc(anchor(bottom) + 5px); 23 left: 0px; 24 justify-self: safe anchor-center; 25 } 26 27 .anchor2 { 28 position: fixed; 29 top: 0px; 30 left: 340px; 31 height: 30px; 32 width: 100px; 33 color: white; 34 background-color: green; 35 anchor-name: --myAnchor2; 36 } 37 .infobox2 { 38 color: darkblue; 39 background-color: azure; 40 border: 1px solid #ddd; 41 padding: 10px; 42 position: fixed; 43 position-anchor: --myAnchor2; 44 left: calc(anchor(right) + 5px); 45 align-self: safe anchor-center; 46 } 47 </style> 48 <div class="anchor">Anchor</div> 49 <div class="infobox"> 50 <p>Anchored element with justify-self</p> 51 </div> 52 <div class="anchor2">Anchor2</div> 53 <div class="infobox2"> 54 <p>Anchored element with align-self</p> 55 </div>