align-self-static-position-003.html (2773B)
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-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-003-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 .static-positioned-inline { 36 left: auto; 37 right: auto; 38 } 39 40 .static-positioned-block { 41 top: auto; 42 bottom: auto; 43 } 44 45 .positioned-inline { 46 left: 0; 47 right: 0; 48 } 49 50 .positioned-block { 51 top: 0; 52 bottom: 0; 53 } 54 55 .center { 56 justify-self: center; 57 align-self: center; 58 } 59 60 .end { 61 justify-self: end; 62 align-self: end; 63 } 64 65 .start { 66 justify-self: start; 67 align-self: start; 68 } 69 </style> 70 <!-- start aligned --> 71 <div class="container"><div class="inline">text 72 <div class="abs static-positioned-inline static-positioned-block start"></div> 73 <br>text 74 </div></div> 75 <div class="container"><div class="inline">text 76 <div class="abs static-positioned-inline positioned-block start"></div> 77 <br>text 78 </div></div> 79 <div class="container"><div class="inline">text 80 <div class="abs positioned-inline static-positioned-block start"></div> 81 <br>text 82 </div></div> 83 <br> 84 <!-- end aligned --> 85 <div class="container"><div class="inline">text 86 <div class="abs static-positioned-inline static-positioned-block end"></div> 87 <br>text 88 </div></div> 89 <div class="container"><div class="inline">text 90 <div class="abs static-positioned-inline positioned-block end"></div> 91 <br>text 92 </div></div> 93 <div class="container"><div class="inline">text 94 <div class="abs positioned-inline static-positioned-block end"></div> 95 <br>text 96 </div></div> 97 <br> 98 <!-- center aligned --> 99 <div class="container"><div class="inline">text 100 <div class="abs static-positioned-inline static-positioned-block center"></div> 101 <br>text 102 </div></div> 103 <div class="container"><div class="inline">text 104 <div class="abs static-positioned-inline positioned-block center"></div> 105 <br>text 106 </div></div> 107 <div class="container"><div class="inline">text 108 <div class="abs positioned-inline static-positioned-block center"></div> 109 <br>text 110 </div></div>