Beispiel:Test-anchor.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test Anchor</title> <style> code { display: grid; grid-template-columns: auto auto; grid-gap: 0.3em; } pre { border: thin solid black; tab-size: 2; } [popover] { top: anchor(top); left: anchor(right); margin: 0; } #d1 { position-anchor: auto; }
#b2 { anchor-name: --b2 }
#d2 { position-anchor: --b2; }
</style>
<script type="module"> // Polyfill für anchor: https://github.com/oddbird/css-anchor-positioning?tab=readme-ov-file if (!("anchorName" in document.documentElement.style)) { import("https://unpkg.com/@oddbird/css-anchor-positioning"); console.log('Polyfill laden'); } </script>
</head>
<body>
Test Anchor (mit Polyfill von oddbird)
<button popovertarget="d1" popovertargetaction="toggle">V1</button>
<button id="b2" popovertarget="d2" popovertargetaction="toggle">V2</button>
<style>
[popover] {
top: anchor(top);
left: anchor(right);
margin: 0;
}
#d1 {
position-anchor: auto;
}
#b2 {
anchor-name: --b2
}
#d2 {
position-anchor: --b2;
}
</style>
<div> <button popovertarget="d1" popovertargetaction="toggle">V1</button> <div id="d1" popover>V1</div> </div> <div> <button id="b2" popovertarget="d2" popovertargetaction="toggle">V2</button> <div id="d2" popover>V2</div> </div>
</body> </html>
