position-sticky-contained-by-display-table-ref.html (1071B)
1 <!DOCTYPE html> 2 <title>position:sticky should work for elements with display: table* containing blocks</title> 3 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 4 <meta name="assert" content="This test checks that position:sticky works for elements with containing blocks that have display: table*" /> 5 6 <style> 7 .group { 8 display: inline-block; 9 } 10 11 .container { 12 height: 1000px; 13 width: 50px; 14 margin-right: 10px; 15 } 16 17 .scroll-container { 18 height: 300px; 19 width: 500px; 20 overflow: hidden; 21 } 22 23 .sticky { 24 height: 50px; 25 width: 50px; 26 background: green; 27 } 28 </style> 29 30 <div class="scroll-container"> 31 <div class="group"> 32 <div class="container" style="display: table-cell;"> 33 <div class="sticky"></div> 34 </div> 35 </div> 36 37 <div class="group"> 38 <div class="container" style="display: table-row;"> 39 <div class="sticky"></div> 40 </div> 41 </div> 42 43 <div class="group"> 44 <div class="container" style="display: table;"> 45 <div class="sticky"></div> 46 </div> 47 </div> 48 </div>