position-sticky-contained-by-display-table.html (1596B)
1 <!DOCTYPE html> 2 <title>position:sticky should work for elements with display: table* containing blocks</title> 3 <link rel="match" href="position-sticky-contained-by-display-table-ref.html" /> 4 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 5 <meta name="assert" content="This test checks that position:sticky works for elements with containing blocks that have display: table*" /> 6 7 <style> 8 .group { 9 display: inline-block; 10 } 11 12 .container { 13 height: 1000px; 14 width: 50px; 15 margin-right: 10px; 16 } 17 18 #scroll-container { 19 height: 300px; 20 width: 500px; 21 overflow: hidden; 22 position: relative; 23 } 24 25 .sticky { 26 position: sticky; 27 height: 50px; 28 width: 50px; 29 background: green; 30 top: 0; 31 } 32 33 #scroll-indicator { 34 display: inline-block; 35 position: absolute; 36 top: 0px; 37 width: 300px; 38 height: 50px; 39 background: red; 40 } 41 </style> 42 43 <script> 44 window.addEventListener('load', function() { 45 document.getElementById('scroll-container').scrollTop = 300; 46 }); 47 </script> 48 49 50 <div id="scroll-container"> 51 <div class="group"> 52 <div class="container" style="display: table-cell;"> 53 <div class="sticky"></div> 54 </div> 55 </div> 56 57 <div class="group"> 58 <div class="container" style="display: table-row;"> 59 <div class="sticky"></div> 60 </div> 61 </div> 62 63 <div class="group"> 64 <div class="container" style="display: table;"> 65 <div class="sticky"></div> 66 </div> 67 </div> 68 69 <!-- This is here to validate that the container does scroll. --> 70 <div id="scroll-indicator" style=""></div> 71 </div>