anchor-pos-sticky-2.html (970B)
1 <html reftest-async-scroll> 2 <style> 3 .container { 4 position: absolute; 5 left: 0; 6 top: 0; 7 } 8 .scroller { 9 position: absolute; 10 overflow: auto; 11 scrollbar-width: none; 12 width: 100px; 13 height: 100px; 14 } 15 .spacer { 16 width: 1px; 17 height: 100px; 18 } 19 .largespacer { 20 width: 1px; 21 height: 500px; 22 } 23 .anchor { 24 position: sticky; 25 top: 0; 26 width: 50px; 27 height: 50px; 28 background: blue; 29 anchor-name: --my-anchor; 30 } 31 .anchored { 32 position: absolute; 33 position-anchor: --my-anchor; 34 position-visibility: always; 35 width: 50px; 36 height: 50px; 37 background: yellow; 38 left: anchor(right); 39 top: anchor(bottom); 40 } 41 </style> 42 <div class="container"> 43 <div class="scroller" 44 reftest-displayport-x="0" reftest-displayport-y="0" 45 reftest-displayport-w="100" reftest-displayport-h="500" 46 reftest-async-scroll-y="250"> 47 <div class="spacer"></div> 48 <div class="anchor"></div> 49 <div class="largespacer"></div> 50 </div> 51 <div class="anchored"></div> 52 </html>