absolute-positioning-grid-container-parent-002-ref.html (1079B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Absolute positioning grid container parent</title> 4 5 <style> 6 7 .grid { 8 display: grid; 9 background-color: gray; 10 grid-template-columns: 50px 100px 150px; 11 grid-template-rows: 25px 50px 100px; 12 width: 300px; 13 height: 200px; 14 border: 5px solid black; 15 margin: 20px 30px; 16 padding: 5px 15px; 17 } 18 19 .container { 20 width: 500px; 21 height: 400px; 22 /* Ensures that the element is the containing block of the absolutely positioned elements. */ 23 position: relative; 24 } 25 26 #item { 27 width: 100%; 28 height: 100%; 29 padding: 10px; 30 background-color: blue; 31 grid-column: 1; 32 grid-row: 1; 33 } 34 35 #absolute { 36 position: absolute; 37 width: 100%; 38 height: 100%; 39 background-color: pink; 40 grid-column: auto; 41 grid-row: auto; 42 top: 20px; 43 left: 60px; 44 } 45 46 </style> 47 48 <p>The test passes if it has the same output than the reference.</p> 49 50 <div class="container"> 51 <div class="grid"> 52 <div id="item"></div> 53 <div id="absolute"></div> 54 </div> 55 </div>