align-self-static-position-007.html (1948B)
1 <!DOCTYPE html> 2 <title>Align-self:self-start/end 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-auto"> 5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-auto"> 6 <link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-alignment"> 7 <link rel="help" href="https://issues.chromium.org/issues/409806799"> 8 <link rel="match" href="align-self-static-position-007-ref.html"> 9 <link rel="stylesheet" href="/fonts/ahem.css"> 10 <style> 11 .inline { 12 display: inline; 13 color: transparent; 14 font: 10px Ahem; 15 line-height: 25px; 16 } 17 18 .container { 19 border: 1px solid; 20 position: relative; 21 width: 100px; 22 height: 100px; 23 display: inline-block; 24 margin-left: 50px; 25 margin-bottom: 50px; 26 } 27 28 .abs { 29 width: 50px; 30 height: 50px; 31 position: absolute; 32 background: purple; 33 } 34 35 .end { 36 justify-self: self-end; 37 align-self: self-end; 38 } 39 40 .start { 41 justify-self: self-start; 42 align-self: self-start; 43 } 44 </style> 45 <!-- self-start aligned --> 46 <div class="container"><div class="inline">text 47 <div class="abs start"></div> 48 <br>text 49 </div></div> 50 <div class="container"><div class="inline">text 51 <div class="abs start" style="direction: rtl;"></div> 52 <br>text 53 </div></div> 54 <div class="container"><div class="inline" style="direction: rtl;">text 55 <div class="abs start" style="direction: ltr;"></div> 56 <br>text 57 </div></div> 58 <br> 59 <!-- self-end aligned --> 60 <div class="container"><div class="inline">text 61 <div class="abs end"></div> 62 <br>text 63 </div></div> 64 <div class="container"><div class="inline">text 65 <div class="abs end" style="direction: rtl;"></div> 66 <br>text 67 </div></div> 68 <div class="container"><div class="inline" style="direction: rtl;">text 69 <div class="abs end" style="direction: ltr;"></div> 70 <br>text 71 </div></div>