absolute-positioning-changing-containing-block-001-ref.html (753B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Absolute positioning changing containing block reference file</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <style> 6 .wrapper { 7 width: 100px; 8 height: 100px; 9 margin-bottom: 25px; 10 background: purple; 11 } 12 13 .grid { 14 width: 50px; 15 height: 50px; 16 background: lightblue; 17 } 18 19 .item { 20 width: 75%; 21 height: 75%; 22 background: orange; 23 } 24 </style> 25 26 <p>The test PASS if you see an orange box inside a purple box on top and a small orange box inside a light blue box inside a purple box on bottom.</p> 27 28 <div class="wrapper"> 29 <div class="item"></div> 30 </div> 31 <div class="wrapper"> 32 <div class="grid"> 33 <div class="item"></div> 34 </div> 35 </div>