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