position-area-scroll-adjust.html (967B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: position-area anchored against scrolling anchor</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area"> 4 <link rel="match" href="position-area-scroll-adjust-ref.html"> 5 <style> 6 #scroller { 7 width: 400px; 8 height: 200px; 9 overflow: auto; 10 } 11 #anchor { 12 anchor-name: --a; 13 background: green; 14 width: 200px; 15 height: 100px; 16 } 17 #anchored { 18 position-anchor: --a; 19 position-area: bottom; 20 margin: 0; 21 padding: 0; 22 border: none; 23 background: green; 24 width: 200px; 25 height: 100px; 26 } 27 .filler { height: 200px; } 28 </style> 29 <p>You should see a green square below</p> 30 <div id="scroller"> 31 <div class="filler"></div> 32 <div id="anchor" popovertarget="anchored"></div> 33 <div id="anchored" popover></div> 34 <div class="filler"></div> 35 <div class="filler"></div> 36 </div> 37 <script> 38 anchored.showPopover(); 39 scroller.scrollTop = 200; 40 </script>