anchor-scroll-to-sticky-004.html (1032B)
1 <!DOCTYPE html> 2 <title>Tests scroll adjustments of element anchored to a sticky-position element</title> 3 <link rel="author" href="mailto:wangxianzhu@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/"> 5 <link rel="match" href="reference/anchor-scroll-to-sticky-004-ref.html"> 6 <style> 7 body { 8 margin: 0; 9 } 10 11 div { 12 width: 100px; 13 height: 100px; 14 } 15 16 #scroller { 17 overflow: scroll; 18 } 19 20 .sticky { 21 position: sticky; 22 top: 0; 23 } 24 25 #anchor { 26 anchor-name: --a1; 27 height: 20px; 28 background: orange; 29 } 30 31 #anchored { 32 position: absolute; 33 position-anchor: --a1; 34 left: anchor(left); 35 top: anchor(bottom); 36 background: green; 37 } 38 39 </style> 40 41 <!-- Anchored to later nested sticky elements. --> 42 <div id="anchored"></div> 43 <div id="scroller"> 44 <div style="height: 50px"></div> 45 <div class="sticky"> 46 <div style="height: 50px"></div> 47 <div id="anchor" class="sticky"></div> 48 <div style="height: 50px"></div> 49 </div> 50 <div style="height: 300px"></div> 51 </div> 52 53 <script> 54 scroller.scrollTop = 200; 55 </script>