anchor-center-safe-ref.html (1054B)
1 <!doctype html> 2 <title>Tests whether safe alignment works correctly on the anchor element.</title> 3 <style> 4 .anchor { 5 position: fixed; 6 left: 0px; 7 top: 0px; 8 height: 30px; 9 color: white; 10 background-color: green; 11 } 12 .infobox { 13 color: darkblue; 14 background-color: azure; 15 border: 1px solid #ddd; 16 padding: 10px; 17 position: fixed; 18 top: 35px; 19 left: 0px; 20 } 21 .anchor2 { 22 position: fixed; 23 left: 340px; 24 top: 0px; 25 height: 30px; 26 width: 100px; 27 color: white; 28 background-color: green; 29 } 30 .infobox2 { 31 color: darkblue; 32 background-color: azure; 33 border: 1px solid #ddd; 34 padding: 10px; 35 position: fixed; 36 top: 0px; 37 left: 445px; /* This value is calculated from the left position value of .anchor2 plus its width, plus an additional 5 px of padding */ 38 } 39 </style> 40 <div style="position: relative;"> 41 <div class="anchor">Anchor</div> 42 <div class="infobox"> 43 <p>Anchored element with justify-self</p> 44 </div> 45 <div class="anchor2">Anchor2</div> 46 <div class="infobox2"> 47 <p>Anchored element with align-self</p> 48 </div> 49 </div>