position-sticky-large-top-ref.html (1075B)
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 overflow: auto; 12 height: 200px; 13 width: 200px; 14 position: relative; 15 } 16 17 .block { 18 width: 100%; 19 height: 200px; 20 background: yellow; 21 position: absolute; 22 top: 50px; 23 } 24 25 .sticky { 26 position: absolute; 27 background: purple; 28 width: 50px; 29 height: 50px; 30 top: 200px; 31 z-index: 1; 32 } 33 </style> 34 <script> 35 function runTest() { 36 document.getElementById("scroll2").scrollTop = 50; 37 } 38 </script> 39 40 <body onload="runTest();"> 41 <div class="scroll"> 42 <div class="sticky"></div> 43 <div class="block"></div> 44 </div> 45 46 <div class="scroll" id="scroll2"> 47 <div class="sticky"></div> 48 <div class="block"></div> 49 </div> 50 </body> 51 </html>