positioned-grid-items-negative-indices-003.html (975B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Absolutely positioned items with negative indices</title> 4 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> 5 <link rel="match" href="positioned-grid-items-negative-indices-003-ref.html"> 6 <meta name="assert" content="Checks that absolutely positioned items are properly placed and sized when they have negative indices in an undefined sized grid."> 7 <style> 8 #grid { 9 display: grid; 10 margin: 4px; 11 padding: 10px; 12 width: 500px; 13 height: 130px; 14 position: relative; 15 } 16 17 #absolute { 18 position: absolute; 19 width: 100%; 20 height: 100%; 21 grid-column: -3 / span 6; 22 grid-row: 1 / 2; 23 background-color: lightblue; 24 } 25 26 #item { 27 grid-column: -5 / span 8; 28 background-color: hotpink; 29 } 30 31 </style> 32 33 <p>The test passes if there are two tracks in hotpink and 6 in light blue.</p> 34 <div id="grid"> 35 <div id="absolute"></div> 36 <div id="item"></div> 37 </div>