grid-item-align-dynamic-pos-003-ref.html (836B)
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>Reference: dynamic change .left on abs.pos. item w. align-self:start</title> 8 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1405319"> 9 <style type="text/css"> 10 html,body { 11 color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; 12 } 13 14 .grid { 15 display: inline-grid; 16 position: relative; 17 background: lightgrey; 18 grid: 50px 50px / 50px 50px; 19 } 20 21 #item { 22 background: grey; 23 position: absolute; 24 align-self: start; 25 left: 20px; 26 } 27 28 </style> 29 </head> 30 <body> 31 32 <div class="grid"> 33 <div style="align-self: start; font-size:32pt">X</div> 34 <div id="item" style="grid-area:2/2">X</div> 35 </div> 36 37 </body> 38 </html>