align-self-static-position-001.html (2578B)
1 <!DOCTYPE html> 2 <title>Align-self 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-001-ref.html"> 9 <style> 10 .block { 11 display: block; 12 width: 75%; 13 height: 50%; 14 border: 5px dotted blue; 15 } 16 17 .container { 18 border: 1px solid; 19 position: relative; 20 width: 100px; 21 height: 100px; 22 display: inline-block; 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 .static-positioned-inline { 35 left: auto; 36 right: auto; 37 } 38 39 .static-positioned-block { 40 top: auto; 41 bottom: auto; 42 } 43 44 .positioned-inline { 45 left: 0; 46 right: 0; 47 } 48 49 .positioned-block { 50 top: 0; 51 bottom: 0; 52 } 53 54 .center { 55 justify-self: center; 56 align-self: center; 57 } 58 59 .end { 60 justify-self: end; 61 align-self: end; 62 } 63 64 .start { 65 justify-self: start; 66 align-self: start; 67 } 68 </style> 69 <!-- start aligned --> 70 <div class="container"><div class="block"> 71 <div class="abs static-positioned-inline static-positioned-block start"></div> 72 </div></div> 73 <div class="container"><div class="block"> 74 <div class="abs static-positioned-inline positioned-block start"></div> 75 </div></div> 76 <div class="container"><div class="block"> 77 <div class="abs positioned-inline static-positioned-block start"></div> 78 </div></div> 79 <br> 80 <!-- end aligned --> 81 <div class="container"><div class="block"> 82 <div class="abs static-positioned-inline static-positioned-block end"></div> 83 </div></div> 84 <div class="container"><div class="block"> 85 <div class="abs static-positioned-inline positioned-block end"></div> 86 </div></div> 87 <div class="container"><div class="block"> 88 <div class="abs positioned-inline static-positioned-block end"></div> 89 </div></div> 90 <br> 91 <!-- center aligned --> 92 <div class="container"><div class="block"> 93 <div class="abs static-positioned-inline static-positioned-block center"></div> 94 </div></div> 95 <div class="container"><div class="block"> 96 <div class="abs static-positioned-inline positioned-block center"></div> 97 </div></div> 98 <div class="container"><div class="block"> 99 <div class="abs positioned-inline static-positioned-block center"></div> 100 </div></div> 101 <br>