position-fixed-inside-sticky-1.html (691B)
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: -1000px; /* scrolls regularly until the top edge hits -1000px, then stays fixed */ 17 height: 1200px; 18 border-bottom: 1px solid black; 19 } 20 #fixed { 21 position: fixed; 22 top: 50px; 23 left: 50px; 24 width: 100px; 25 height: 100px; 26 box-sizing: border-box; 27 border: 1px solid blue; 28 } 29 </style> 30 <div id="sticky"> 31 <div id="fixed"></div> 32 </div> 33 </html>