anchor-position-top-layer-004.html (937B)
1 <!DOCTYPE html> 2 <title>Top-layer element can anchor to preceeding top-layer fixed positioned element</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#target-anchor-element"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <link rel="match" href="anchor-position-top-layer-ref.html"> 6 7 <style> 8 #anchor { 9 position: fixed; 10 top: 200px; 11 left: 200px; 12 width: 100px; 13 height: 100px; 14 background: orange; 15 anchor-name: --a; 16 } 17 18 #target { 19 top: anchor(top); 20 left: anchor(right); 21 width: 100px; 22 height: 100px; 23 background: lime; 24 position-anchor: --a; 25 outline: none; 26 } 27 28 body { 29 margin: 0; 30 height: 300vh; 31 } 32 33 dialog { 34 margin: 0; 35 border: 0; 36 padding: 0; 37 inset: auto; 38 } 39 40 dialog::backdrop { 41 background: transparent; 42 } 43 </style> 44 45 <dialog id="anchor"></dialog> 46 <dialog id="target"></dialog> 47 48 <script> 49 anchor.showModal(); 50 target.showModal(); 51 document.scrollingElement.scrollTop = 100; 52 </script>