anchor-scroll-fixedpos-003.html (879B)
1 <!DOCTYPE html> 2 3 <title>Tests that fixed-positioned anchor-positioned elements doesn't get clipped by the viewport</title> 4 <link rel="author" href="mailto:kiet.ho@apple.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/"> 6 <link rel="match" href="reference/anchor-scroll-fixedpos-003-ref.html"> 7 8 <style> 9 body { 10 margin: 0; 11 } 12 13 div { 14 width: 100px; 15 height: 100px; 16 font-size: 16px; 17 } 18 19 #anchor { 20 anchor-name: --a1; 21 margin-top: 105vh; 22 background: orange; 23 } 24 25 #anchored { 26 position: fixed; 27 position-anchor: --a1; 28 left: anchor(left); 29 bottom: anchor(top); 30 background: green; 31 color: white; 32 } 33 </style> 34 35 <body> 36 <div id="anchor"></div> 37 <div id="anchored">Anchored element</div> 38 39 <script> 40 const anchor = document.getElementById("anchor"); 41 anchor.scrollIntoView(false); 42 </script> 43 </body>