position-sticky-inline-ref.html (1399B)
1 <!DOCTYPE html> 2 <title>Reference for position:sticky should work for inline elements</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 .indicator { 27 position: absolute; 28 left: 0; 29 color: green; 30 } 31 32 .inline { 33 display: inline; 34 } 35 </style> 36 37 <script> 38 window.addEventListener('load', function() { 39 document.getElementById('scroller1').scrollTop = 50; 40 document.getElementById('scroller2').scrollTop = 125; 41 document.getElementById('scroller3').scrollTop = 250; 42 }); 43 </script> 44 45 <div>You should see three green rectangles below. No red or blue should be visible.</div> 46 47 <div class="group"> 48 <div id="scroller1" class="scroller"> 49 <div class="contents"> 50 <div class="indicator inline" style="top: 150px;">XXX</div> 51 </div> 52 </div> 53 </div> 54 55 <div class="group"> 56 <div id="scroller2" class="scroller"> 57 <div class="contents"> 58 <div class="indicator inline" style="top: 175px;">XXX</div> 59 </div> 60 </div> 61 </div> 62 63 <div class="group"> 64 <div id="scroller3" class="scroller"> 65 <div class="contents"> 66 <div class="indicator inline" style="top: 275px;">XXX</div> 67 </div> 68 </div> 69 </div>