anchor-pos-sticky-3.html (1454B)
1 <!DOCTYPE html> 2 <html reftest-async-scroll> 3 <style> 4 .container { 5 position: absolute; 6 left: 0; 7 top: 0; 8 } 9 .scroller { 10 position: absolute; 11 overflow: auto; 12 scrollbar-width: none; 13 width: 150px; 14 height: 100px; 15 } 16 .spacer { 17 width: 1px; 18 height: 100px; 19 } 20 .largespacer { 21 width: 1px; 22 height: 500px; 23 } 24 .anchor1 { 25 width: 50px; 26 height: 50px; 27 background: blue; 28 anchor-name: --my-anchor1; 29 position: absolute; 30 position-anchor: --my-anchor2; 31 position-visibility: always; 32 left: anchor(right); 33 top: anchor(bottom); 34 } 35 .anchor2 { 36 position: sticky; 37 top: 0; 38 width: 50px; 39 height: 50px; 40 background: pink; 41 anchor-name: --my-anchor2; 42 } 43 .anchored { 44 position: absolute; 45 position-anchor: --my-anchor1; 46 position-visibility: always; 47 width: 50px; 48 height: 50px; 49 background: yellow; 50 left: anchor(right); 51 top: anchor(bottom); 52 } 53 </style> 54 <div class="container"> 55 <div class="scroller" 56 reftest-displayport-x="0" reftest-displayport-y="0" 57 reftest-displayport-w="150" reftest-displayport-h="500"> 58 <div class="scroller" 59 reftest-displayport-x="0" reftest-displayport-y="0" 60 reftest-displayport-w="150" reftest-displayport-h="500" 61 reftest-async-scroll-y="50"> 62 <div class="spacer"></div> 63 <div class="anchor2"></div> 64 <div class="largespacer"></div> 65 </div> 66 <div class="anchor1"></div> 67 <div class="largespacer"></div> 68 </div> 69 <div class="anchored"></div> 70 </div> 71 </html>