position-sticky-large-top-2-ref.html (1162B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Position Test Reference: Test position:sticky element with large top in an overflow scroll container</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 7 8 <style> 9 .scroll { 10 border: 5px solid blue; 11 padding: 5px 3px 0 8px; 12 overflow: auto; 13 height: 200px; 14 width: 200px; 15 position: relative; 16 } 17 18 .block { 19 width: 150px; 20 height: 200px; 21 background: yellow; 22 position: absolute; 23 top: 55px; 24 } 25 26 .sticky { 27 position: absolute; 28 background: purple; 29 width: 50px; 30 height: 50px; 31 top: 205px; 32 z-index: 1; 33 } 34 </style> 35 <script> 36 function runTest() { 37 document.getElementById("scroll2").scrollTop = 50; 38 } 39 </script> 40 41 <body onload="runTest();"> 42 <div class="scroll"> 43 <span> 44 <div class="sticky"></div> 45 </span> 46 <div class="block"></div> 47 </div> 48 49 <div class="scroll" id="scroll2"> 50 <span> 51 <div class="sticky"></div> 52 </span> 53 <div class="block"></div> 54 </div> 55 </body> 56 </html>