grid-abspos-items-002-ref.html (3409B)
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 top:2px; left:1px; 19 border: 1px solid; 20 grid-auto-flow: row; 21 grid-auto-columns: 23px; 22 grid-auto-rows: 7px; 23 padding: 17px 7px 11px 13px; 24 width: 100px; 25 height: 60px; 26 } 27 .zero-size { width:0; height:0; } 28 .auto-size { width:auto; height:0px; } 29 30 .a { 31 position: absolute; 32 left: 13px; top: 31px; 33 height: 12px; width: 44px; 34 background: blue; 35 } 36 37 .abs { 38 position: absolute; 39 opacity: 0.7; 40 width: 21px; 41 height: 15px; 42 } 43 .b { 44 left: 1px; top: 3px; bottom: 1px; 45 width: 28px; height: auto; 46 } 47 .c { 48 right: 5px; bottom: 1px; 49 width: 112px; height: 82px; 50 } 51 .d { 52 left: 1px; top: 20px; 53 width: 5px; height: 1px; 54 } 55 .e { 56 right: 5px; bottom: 1px; 57 width: 112px; height: 51px; 58 } 59 .f { 60 right: 5px; top: 3px; 61 width: 112px; height: 11px; 62 } 63 .g { 64 left: 14px; top: 27px; 65 width: 38px; height: 1px; 66 } 67 .h { 68 top:3px; left:1px; right:5px; bottom:1px; 69 width:auto; height:auto; 70 } 71 .i, .j { 72 top:3px; left:1px; right:5px; bottom:1px; 73 border:none; 74 width:auto; height:auto; 75 } 76 span { 77 background: lime; 78 border: 1px solid; 79 } 80 </style> 81 </head> 82 <body> 83 84 <div style="float:left"> 85 86 <div class="grid"> 87 <span class="a"></span> 88 <span class="b abs">b</span> 89 </div> 90 91 <div class="grid"> 92 <span class="a"></span> 93 <span class="c abs">c</span> 94 </div> 95 96 <div class="grid"> 97 <span class="a"></span> 98 <span class="d abs">d</span> 99 </div> 100 101 <div class="grid"> 102 <span class="a"></span> 103 <span class="e abs">e</span> 104 </div> 105 106 <div class="grid"> 107 <span class="a"></span> 108 <span class="f abs">f</span> 109 </div> 110 111 <div class="grid"> 112 <span class="a"></span> 113 <span class="g abs">g</span> 114 </div> 115 116 </div><div style="float:left"> 117 118 <div class="grid"> 119 <span class="a"></span> 120 <span class="b abs">b</span> 121 </div> 122 123 <div class="grid"> 124 <span class="a"></span> 125 <span class="c abs">c</span> 126 </div> 127 128 <div class="grid"> 129 <span class="a"></span> 130 <span class="d abs">d</span> 131 </div> 132 133 <div class="grid"> 134 <span class="a"></span> 135 <span class="e abs">e</span> 136 </div> 137 138 <div class="grid"> 139 <span class="a"></span> 140 <span class="f abs">f</span> 141 </div> 142 143 <div class="grid"> 144 <span class="a"></span> 145 <span class="g abs">g</span> 146 </div> 147 148 </div><div style="float:left"> 149 150 <div class="grid zero-size"> 151 <span class="b abs" style="width:12px">b</span> 152 </div> 153 154 <div class="grid auto-size"> 155 <span class="h abs">h</span> 156 </div> 157 158 <div class="grid" style="height:7px"> 159 <span class="i abs">i</span> 160 </div> 161 162 <div class="grid" style="height:7px"> 163 <span class="j abs">j</span> 164 </div> 165 166 <div class="grid" style="width:43px; height:53px"> 167 <span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span> 168 <span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span> 169 <span class="abs" style="left:1px; bottom:1px; height:58px; width:5px;">c</span> 170 <span class="abs" style="right:5px; bottom:1px; height:58px; width:42px;">d</span> 171 </div> 172 173 </div> 174 175 </body> 176 </html>