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