grid-position-area-basic.html (981B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1924786"> 4 <link rel="help" href="https://drafts.csswg.org/css-position/#original-cb"> 5 <link rel="match" href="grid-position-area-basic-ref.html"> 6 <style> 7 #grid { 8 display: grid; 9 grid: 150px 100px / 200px 300px; 10 padding: 20px; 11 position: relative; 12 border: 1px solid; 13 } 14 15 #positioned { 16 position: absolute; 17 background: magenta; 18 grid-column: 1 / 2; 19 grid-row: 1 / 2; 20 position-anchor: --foo; 21 position-area: top right; 22 /* FIXME: Shouldn't be needed */ 23 width: fit-content; 24 height: fit-content; 25 } 26 27 #static { 28 background: pink; 29 grid-column: 1 / 2; 30 grid-row: 1 / 2; 31 } 32 33 #anchor { 34 background: lime; 35 grid-column: 2 / 3; 36 grid-row: 2 / 3; 37 anchor-name: --foo; 38 } 39 40 .abs-cb { 41 width: 600px; 42 height: 600px; 43 position: relative; 44 } 45 </style> 46 47 <div id="grid"> 48 <div id="anchor"></div> 49 <div id="positioned">Anchored</div> 50 <div id="static"></div> 51 </div>