align-self-static-position-006.html (1796B)
1 <!DOCTYPE html> 2 <title>Align-self:self-start/end applies to OOF elements of block 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-006-ref.html"> 9 <style> 10 .block { 11 display: block; 12 width: 75%; 13 height: 75%; 14 border: 5px dotted blue; 15 } 16 17 .container { 18 border: 1px solid; 19 position: relative; 20 display: inline-block; 21 width: 100px; 22 height: 100px; 23 margin-left: 50px; 24 margin-bottom: 50px; 25 } 26 27 .abs { 28 width: 50px; 29 height: 50px; 30 position: absolute; 31 background: purple; 32 } 33 34 .end { 35 justify-self: self-end; 36 align-self: self-end; 37 } 38 39 .start { 40 justify-self: self-start; 41 align-self: self-start; 42 } 43 </style> 44 <!-- self-start aligned --> 45 <div class="container"><div class="block"> 46 <div class="abs start"></div> 47 </div></div> 48 <div class="container"><div class="block"> 49 <div class="abs start" style="direction: rtl;"></div> 50 </div></div> 51 <div class="container"><div class="block" style="direction: rtl;"> 52 <div class="abs start" style="direction: ltr;"></div> 53 </div></div> 54 <br> 55 <!-- self-end aligned --> 56 <div class="container"><div class="block"> 57 <div class="abs end"></div> 58 </div></div> 59 <div class="container"><div class="block"> 60 <div class="abs end" style="direction: rtl;"></div> 61 </div></div> 62 <div class="container"><div class="block" style="direction: rtl;"> 63 <div class="abs end" style="direction: ltr;"></div> 64 </div></div>