align-self-static-position-005.html (1060B)
1 <!DOCTYPE html> 2 <title>Align-self applies to OOF elements of inline elements when statically positioned.</title> 3 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-normal"> 5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-normal"> 6 <link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-alignment"> 7 <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos"> 8 <link rel="help" href="https://issues.chromium.org/issues/409806799"> 9 <link rel="match" href="align-self-static-position-005-ref.html"> 10 <link rel="stylesheet" href="/fonts/ahem.css"> 11 <style> 12 .container { 13 position: relative; 14 border: 1px solid; 15 } 16 17 .abs { 18 position: absolute; 19 background: purple; 20 align-self: end; 21 opacity: 0.5; 22 } 23 </style> 24 <div class="container"> 25 <span style="font: 20px/1 Ahem;">hello 26 <span class="abs">hello</span> 27 <span style="vertical-align: top; font-size: 50px;">world</span> 28 </span> 29 </div>