row-grid-lanes-out-of-flow-003.html (1656B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes Test: Grid Lanes layout out-of-flow positioning</title> 6 <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos"> 8 <link rel="match" href="row-grid-lanes-out-of-flow-003-ref.html"> 9 <style> 10 .container { 11 width: 400px; 12 height: 500px; 13 position: relative; 14 border: 2px solid black; 15 margin: 20px; 16 } 17 18 .grid-lanes { 19 display: grid-lanes; 20 grid-lanes-direction: row; 21 grid-template-rows: 50px 100px 150px; 22 border: 5px solid blue; 23 margin: 30px 20px; 24 padding: 15px 5px; 25 gap: 10px; 26 } 27 28 .grid-lanes-item { 29 background: lightgray; 30 padding: 10px; 31 width: 200px; 32 } 33 34 .nested-container { 35 background: lightgreen; 36 padding: 5px; 37 border: 1px solid green; 38 } 39 40 .absolute { 41 position: absolute; 42 background: red; 43 width: 60px; 44 height: 40px; 45 top: 50px; 46 left: 100px; 47 border: 1px solid darkred; 48 } 49 50 .static-pos { 51 position: absolute; 52 background: orange; 53 width: 10px; 54 height: 10px; 55 } 56 </style> 57 </head> 58 <body> 59 <div class="container"> 60 <div class="grid-lanes"> 61 <div class="grid-lanes-item"> 62 <div class="nested-container"> 63 <div class="absolute"></div> 64 </div> 65 </div> 66 <div class="grid-lanes-item"></div> 67 <div class="grid-lanes-item"></div> 68 <div class="static-pos"></div> 69 </div> 70 </div> 71 </body> 72 </html>