positioned-grid-items-022.html (963B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Positioned grid items</title> 4 <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> 5 <link rel="match" href="positioned-grid-items-022-ref.html"> 6 <meta name="assert" content="Checks that absolutely positioned grid items are properly placed in an undefined grid."> 7 <style> 8 #grid { 9 display: grid; 10 width: 100px; 11 height: 100px; 12 background-color: blue; 13 position: relative; 14 padding: 5px; 15 } 16 17 .abspos { 18 position: absolute; 19 top: 0px; bottom: 0px; left: 0px; right: 0px; 20 width: 100%; 21 height: 100%; 22 background-color: hotpink; 23 } 24 25 #start { 26 grid-area: 1/1/auto/auto; 27 } 28 29 #end { 30 grid-area: auto/auto/1/1; 31 } 32 33 </style> 34 35 <p>The test passes if it has the same output than the reference.</p> 36 37 <div id="grid"> 38 <div class="abspos" id="start"></div> 39 <div class="abspos" id="end"></div> 40 </div>