position-sticky-table-td-bottom-ref.html (1291B)
1 <!DOCTYPE html> 2 <title>Reference for position:sticky bottom constraint should behave correctly for <td> elements</title> 3 4 <style> 5 .group { 6 display: inline-block; 7 position: relative; 8 width: 150px; 9 height: 200px; 10 } 11 12 .scroller { 13 position: relative; 14 width: 100px; 15 height: 150px; 16 overflow-x: hidden; 17 overflow-y: auto; 18 } 19 20 .contents { 21 height: 550px; 22 } 23 24 .indicator { 25 position: absolute; 26 background-color: green; 27 left: 0; 28 height: 50px; 29 width: 50px; 30 } 31 </style> 32 33 <script> 34 window.addEventListener('load', function() { 35 document.getElementById('scroller1').scrollTop = 0; 36 document.getElementById('scroller2').scrollTop = 75; 37 document.getElementById('scroller3').scrollTop = 150; 38 }); 39 </script> 40 41 <div>You should see three green boxes below. No red should be visible.</div> 42 43 <div class="group"> 44 <div id="scroller1" class="scroller"> 45 <div class="indicator" style="top: 100px;"></div> 46 <div class="contents"></div> 47 </div> 48 </div> 49 50 <div class="group"> 51 <div id="scroller2" class="scroller"> 52 <div class="indicator" style="top: 150px;"></div> 53 <div class="contents"></div> 54 </div> 55 </div> 56 57 <div class="group"> 58 <div id="scroller3" class="scroller"> 59 <div class="indicator" style="top: 200px;"></div> 60 <div class="contents"></div> 61 </div> 62 </div>