positioned-grid-items-negative-indices-002.html (1429B)
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-002-ref.html"> 6 <meta name="assert" content="Checks that absolutely positioned items are properly placed and sized when they have negative indices."> 7 <style> 8 #grid { 9 display: grid; 10 grid: 50px 50px / 50px 50px; 11 margin: 1px 2px 3px 4px; 12 padding: 100px 100px 100px 100px; 13 border-width: 9px 3px 12px 6px; 14 border-style: solid; 15 width: 100px; 16 height: 100px; 17 position: relative; 18 background-color: gray; 19 } 20 21 #grid > div { 22 position: absolute; 23 width: 100%; 24 height: 100%; 25 } 26 27 #firstItem { 28 background: magenta; 29 grid-column: auto / -3; 30 grid-row: auto / -3; 31 } 32 33 #secondItem { 34 background: cyan; 35 grid-column: -1 / auto; 36 grid-row: -1 / auto; 37 } 38 39 #thirdItem { 40 background: yellow; 41 grid-column: -5 / -6; 42 grid-row: -5 / -6; 43 width: 25% !important; 44 height: 25% !important; 45 } 46 47 #fourthItem { 48 background: lime; 49 grid-column: -2 / 3; 50 grid-row: 2 / -1; 51 } 52 </style> 53 54 <p>The test passes if it has the same output than the reference.</p> 55 <div id="grid"> 56 <div id="firstItem"></div> 57 <div id="secondItem"></div> 58 <div id="thirdItem"></div> 59 <div id="fourthItem"></div> 60 </div>