position-sticky-table-th-right-ref.html (1293B)
1 <!DOCTYPE html> 2 <title>Reference for position:sticky right constraint should behave correctly for <th> elements</title> 3 4 <style> 5 .group { 6 position: relative; 7 width: 250px; 8 height: 150px; 9 } 10 11 .scroller { 12 position: relative; 13 width: 200px; 14 height: 100px; 15 overflow-x: auto; 16 overflow-y: hidden; 17 } 18 19 .contents { 20 height: 10px; 21 width: 500px; 22 } 23 24 .indicator { 25 position: absolute; 26 background-color: green; 27 top: 0; 28 height: 50px; 29 width: 50px; 30 } 31 </style> 32 33 <script> 34 window.addEventListener('load', function() { 35 document.getElementById('scroller1').scrollLeft = 0; 36 document.getElementById('scroller2').scrollLeft = 75; 37 document.getElementById('scroller3').scrollLeft = 200; 38 }); 39 </script> 40 41 <div>You should see three green boxes below. No red or blue should be visible.</div> 42 43 <div class="group"> 44 <div id="scroller1" class="scroller"> 45 <div class="indicator" style="left: 150px;"></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="left: 200px;"></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="left: 300px;"></div> 60 <div class="contents"></div> 61 </div> 62 </div>