grid-positioned-items-background-001-ref.html (956B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Grid positioned items background reference file</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <style> 6 .grid { 7 width: 500px; 8 height: 300px; 9 border: 5px solid black; 10 margin: 30px; 11 padding: 15px; 12 } 13 14 .container { 15 position: relative; 16 float: left; 17 } 18 19 .absolute { 20 position: absolute; 21 } 22 23 .green { 24 background-color: green; 25 } 26 </style> 27 28 <p>The test passes if you see 4 green boxes and no red.</p> 29 30 <div class="container"> 31 <div class="grid"></div> 32 <div class="absolute green" style="left: 55px; top: 50px; width: 100px; height: 50px"></div> 33 <div class="absolute green" style="left: 290px; top: 50px; width: 50px; height: 20px"></div> 34 <div class="absolute green" style="left: 50px; top: 115px; width: 50px; height: 30px"></div> 35 <div class="absolute green" style="left: 175px; top: 135px; width: 145px; height: 75px"></div> 36 </div>