position-fixed-inside-sticky-2.html (705B)
1 <!DOCTYPE html> 2 <html reftest-async-scroll 3 reftest-displayport-x="0" reftest-displayport-y="0" 4 reftest-displayport-w="800" reftest-displayport-h="2000" 5 reftest-async-scroll-x="0" reftest-async-scroll-y="50"> 6 <style> 7 html { 8 scrollbar-width: none; 9 } 10 body { 11 height: 4000px; 12 margin: 0; 13 } 14 #sticky { 15 position: sticky; 16 top: 25px; /* scrolls regularly until the top edge hits 25px, then stays fixed */ 17 margin-top: 50px; 18 height: 1200px; 19 border-bottom: 1px solid black; 20 } 21 #fixed { 22 position: fixed; 23 top: 50px; 24 left: 50px; 25 width: 100px; 26 height: 100px; 27 box-sizing: border-box; 28 border: 1px solid blue; 29 } 30 </style> 31 <div id="sticky"> 32 <div id="fixed"></div> 33 </div> 34 </html>