column-grid-lanes-out-of-flow-003.html (1628B)
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="column-grid-lanes-out-of-flow-003-ref.html"> 9 <style> 10 .container { 11 width: 500px; 12 height: 400px; 13 position: relative; 14 border: 2px solid black; 15 margin: 20px; 16 } 17 18 .grid-lanes { 19 display: grid-lanes; 20 grid-template-columns: 50px 100px 150px; 21 border: 5px solid blue; 22 margin: 20px 30px; 23 padding: 5px 15px; 24 gap: 10px; 25 } 26 27 .grid-lanes-item { 28 background: lightgray; 29 padding: 10px; 30 height: 200px; 31 } 32 33 .nested-container { 34 background: lightgreen; 35 padding: 5px; 36 border: 1px solid green; 37 } 38 39 .absolute { 40 position: absolute; 41 background: red; 42 width: 60px; 43 height: 40px; 44 top: 50px; 45 left: 100px; 46 border: 1px solid darkred; 47 } 48 49 .static-pos { 50 position: absolute; 51 background: orange; 52 width: 10px; 53 height: 10px; 54 } 55 </style> 56 </head> 57 <body> 58 <div class="container"> 59 <div class="grid-lanes"> 60 <div class="grid-lanes-item"> 61 <div class="nested-container"> 62 <div class="absolute"></div> 63 </div> 64 </div> 65 <div class="grid-lanes-item"></div> 66 <div class="grid-lanes-item"></div> 67 <div class="static-pos"></div> 68 </div> 69 </div> 70 </body> 71 </html>