If you’ve ever needed the positioning of an element to be connected (or anchored) to the position of another element, then you’ll be very excited about anchor positioning in CSS! It is new (as of the time of recording), but thankfully, we have a really good Polyfill, so we don’t have to worry about browser support!

🔗 Links
✅ Chrome for Developers blog article on anchor positioning: https://developer.chrome.com/blog/anchor-positioning-api
✅ MDN on Anchor Positioning: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning
✅ Popover Polyfill: https://github.com/oddbird/popover-polyfill
✅ Anchor positioning polyfill: https://github.com/oddbird/css-anchor-positioning
✅ Browser support for popover: https://caniuse.com/mdn-api_htmlelement_popover
✅ Browser support for anchor positioning: https://caniuse.com/css-anchor-positioning
✅ I’ve got courses! https://kevinpowell.co/courses

⌚ Timestamps
00:00 - Introduction
00:33 - Turning our element into a popover
02:05 - Only change the display value when the popover is opened
03:25 - A few user agent styles you’ll probably want to overwrite
04:40 - Creating an anchor, and connecting an element to it
06:20 - Using the new anchor() function to position the element where you want
08:20 - Polyfills
10:15 - Change the positioning of the element when it runs out of room with @position-try
13:50 - Semantics
14:50 - Fading the out with allow-discrete
18:20 - Fading the menu in with @starting-style

#css

--

Come hang out with other dev's in my Discord Community
💬 https://discord.gg/nTYCvrK

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
📽️ Join as a channel member: https://youtube.com/@kevinpowell/join
💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: Join this channel to get access to perks:
https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw/join

---

My editor: VS Code - https://code.visualstudio.com/

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Kevin Powell

Learn how to create a popover menu that follows the position of a button using modern CSS techniques, including new attributes like popover and anchor positioning. The post provides a step-by-step guide and addresses browser compatibility issues with polyfills. It also covers how to add animations to these popovers and discusses the semantics of different HTML elements.

CSS Popover + Anchor Positioning is Magical

Kevin, watching your tutorials and noticing your smiles every line of code doing something “magic” make my <code>frontend</code> day! 😂😂😂
I’m a huge fan of your work and skills! Keep it up!

Its one of the most useful features for web apps.

This post of daily.dev is life saver for me. You may remember, few days before I commented on your post on YouTube that I subscribed you with my 3 account and should I create more for the 1M! 😉
Jokes apart. In a project in my office, I needed this feature but I was so busy with the work I could not find this video. So I left it for later. And today, I came to office and your video is on my face. Thanks Kevin 😘