grid-abspos-items-001-ref.html (3860B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title> 8 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783"> 9 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> 10 11 <meta charset="utf-8"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } 14 15 .grid { 16 /*display: grid;*/ 17 position: relative; 18 border: 1px solid; 19 grid-auto-flow: row; 20 grid-auto-columns: 23px; 21 grid-auto-rows: 7px; 22 padding: 17px 7px 11px 13px; 23 width: 100px; 24 height: 60px; 25 } 26 .zero-size { width:0; height:0; } 27 .auto-size { width:auto; height:0px; } 28 29 .a { 30 position: absolute; 31 left: 13px; top: 31px; 32 height: 12px; width: 44px; 33 background: blue; 34 } 35 36 .abs { 37 position: absolute; 38 opacity: 0.7; 39 width: 21px; 40 height: 15px; 41 } 42 .b { 43 left: 1px; top: 3px; bottom: 1px; 44 width: 28px; height: auto; 45 } 46 .c { 47 right: 5px; bottom: 1px; 48 width: 112px; height: 82px; 49 } 50 .d { 51 left: 1px; top: 20px; 52 width: 5px; height: 1px; 53 } 54 .e { 55 right: 5px; bottom: 1px; 56 width: 112px; height: 51px; 57 } 58 .f { 59 right: 5px; top: 3px; 60 width: 112px; height: 11px; 61 } 62 .g { 63 left: 14px; top: 27px; 64 width: 38px; height: 1px; 65 } 66 .h { 67 top:3px; left:1px; right:5px; bottom:1px; 68 width:auto; height:auto; 69 } 70 .i, .j { 71 top:3px; left:1px; right:5px; bottom:1px; 72 border:none; 73 width:auto; height:auto; 74 } 75 span { 76 background: lime; 77 border: 1px solid; 78 } 79 </style> 80 </head> 81 <body> 82 83 <div style="float:left"> 84 85 <div class="grid"> 86 <span class="a"></span> 87 <span class="b abs">b</span> 88 </div> 89 90 <div class="grid"> 91 <span class="a"></span> 92 <span class="c abs">c</span> 93 </div> 94 95 <div class="grid"> 96 <span class="a"></span> 97 <span class="d abs">d</span> 98 </div> 99 100 <div class="grid"> 101 <span class="a"></span> 102 <span class="e abs">e</span> 103 </div> 104 105 <div class="grid"> 106 <span class="a"></span> 107 <span class="f abs">f</span> 108 </div> 109 110 <div class="grid"> 111 <span class="a"></span> 112 <span class="g abs">g</span> 113 </div> 114 115 </div><div style="float:left"> 116 117 <div class="grid"> 118 <span class="a"></span> 119 <span class="b abs">b</span> 120 </div> 121 122 <div class="grid"> 123 <span class="a"></span> 124 <span class="c abs">c</span> 125 </div> 126 127 <div class="grid"> 128 <span class="a"></span> 129 <span class="d abs">d</span> 130 </div> 131 132 <div class="grid"> 133 <span class="a"></span> 134 <span class="e abs">e</span> 135 </div> 136 137 <div class="grid"> 138 <span class="a"></span> 139 <span class="f abs">f</span> 140 </div> 141 142 <div class="grid"> 143 <span class="a"></span> 144 <span class="g abs">g</span> 145 </div> 146 147 </div><div style="float:left"> 148 149 <div class="grid zero-size"> 150 <span class="b abs" style="width:12px">b</span> 151 </div> 152 153 <div class="grid auto-size"> 154 <span class="h abs">h</span> 155 </div> 156 157 <div class="grid" style="height:7px"> 158 <span class="i abs">i</span> 159 </div> 160 161 <div class="grid" style="height:7px"> 162 <span class="j abs">j</span> 163 </div> 164 165 <div class="grid" style="width:43px; height:53px"> 166 <span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span> 167 <span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span> 168 <span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span> 169 <span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span> 170 </div> 171 172 <div class="grid" style="width:43px; height:28px; border-width:0;"> 173 <span class="abs" style="right:48px; top:3px; height:11px; width:12px;"></span> 174 </div> 175 <div class="grid" style="width:43px; height:28px; border-width:0;"> 176 <span class="abs" style="left:1px; bottom:57px; height:22px; width:5px;"></span> 177 </div> 178 <div class="grid" style="width:43px; height:28px; border-width:0;"> 179 <span class="abs" style="right:48px; bottom:85px; height:22px; width:12px;"></span> 180 </div> 181 182 </div> 183 184 </body> 185 </html>