absolute-positioning-grid-container-parent-002.html (1234B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Absolute positioning grid container parent</title> 4 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> 5 <meta name="assert" content="This test checks the behavior of the absolutely positioned descendant elements with a grid container as parent."> 6 <link rel="stylesheet" href="/fonts/ahem.css"> 7 <link rel="stylesheet" href="/css/support/grid.css"> 8 9 <style> 10 11 .grid { 12 grid-template-columns: 50px 100px 150px; 13 grid-template-rows: 25px 50px 100px; 14 width: 300px; 15 height: 200px; 16 border: 5px solid black; 17 margin: 20px 30px; 18 padding: 5px 15px; 19 } 20 21 .container { 22 width: 500px; 23 height: 400px; 24 } 25 26 .relative { 27 /* Ensures that the element is the containing block of the absolutely positioned elements. */ 28 position: relative; 29 } 30 31 .absolute { 32 position: absolute; 33 } 34 35 </style> 36 37 <p>The test passes if it has the same output than the reference.</p> 38 39 <div class="container relative"> 40 <div class="grid"> 41 <div class="sizedToGridArea firstRowFirstColumn" style="padding: 10px;"> 42 <div class="sizedToGridArea autoRowAutoColumn absolute"></div> 43 </div> 44 </div> 45 </div>