[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"quiz-css-anchor-positioning":32,"quiz-article-css-anchor-positioning":48},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"kind":35,"title":36,"description":37,"config":38,"verticalId":5,"vertical":43,"course":40,"_count":44,"access":45,"attempts":47,"questionCount":39},"019fe776-5b3c-7533-8009-9eda86b8b975","css-anchor-positioning","PRACTICE_QUIZ","CSS Anchor Positioning: tooltips and popovers without the JS","Anchor positioning lets a floating element track another element in pure CSS. Know which property names the anchor, which links the floating element, what position-area and position-try-fallbacks do, and the cases where you still need JavaScript or the Popover API.",{"questionCount":39,"timeLimitSec":40,"shuffleQuestions":18,"shuffleOptions":17,"negativeMarking":19,"passScorePct":41,"maxAttempts":40,"revealAnswers":42,"allowFlagging":18,"allowBacktracking":17},8,null,70,"IMMEDIATE",{"slug":6,"name":7},{"questions":39},{"allowed":17,"reason":46},"FREE",[],{"id":49,"slug":34,"title":50,"subtitle":40,"excerpt":51,"coverUrl":52,"locale":13,"readingMinutes":53,"publishedAt":54,"viewCount":55,"likeCount":19,"commentCount":19,"author":56,"vertical":61,"topic":62,"tags":65,"_count":77,"playground":79,"body":81,"bodyMd":249,"seo":250,"translationGroupId":254,"thread":255,"assessments":257,"translations":260,"quiz":262},"019fe660-48c5-70fe-a5b4-b20c5b2661e7","You're using Floating UI to position your tooltip. The browser does it natively now.","CSS Anchor Positioning is Baseline 2026 — it lets any element declare itself an anchor and any floating element position relative to it in pure CSS. No JavaScript, no layout math, no ResizeObserver wiring.","\u002Fmedia\u002Fcovers\u002Fcss-anchor-positioning.png",5,"2026-07-18T07:59:42.250Z",30,{"id":57,"name":58,"username":59,"avatarUrl":40,"headline":60},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":63,"name":64},"css","CSS",[66,68,71,74],{"slug":63,"name":67,"color":40},"Css",{"slug":69,"name":70,"color":40},"webdev","Webdev",{"slug":72,"name":73,"color":40},"frontend","Frontend",{"slug":75,"name":76,"color":40},"javascript","Javascript",{"assessments":78},1,{"slug":34,"title":80},"CSS Anchor Positioning — position a tooltip with zero JS",{"blocks":82,"version":78},[83,87,93,96,99,103,106,109,113,116,120,123,126,130,133,137,140,144,147,151,154,158,161,164,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240],{"id":84,"html":85,"type":86},"b1","\u003Cp>Here is the code you have written, or something close to it, for every tooltip on every project:\u003C\u002Fp>","paragraph",{"id":88,"code":89,"type":90,"language":91,"highlight":92},"b2","import { computePosition, flip, shift, offset } from '@floating-ui\u002Fdom';\n\nconst { x, y } = await computePosition(button, tooltip, {\n  placement: 'top',\n  middleware: [offset(8), flip(), shift({ padding: 8 })],\n});\n\nObject.assign(tooltip.style, {\n  left: `${x}px`,\n  top: `${y}px`,\n});","code","js",[],{"id":94,"html":95,"type":86},"b3","\u003Cp>Then you wire it to a ResizeObserver so it recomputes when the button moves. Then a scroll listener for the same reason. Then you discover the tooltip clips inside an \u003Ccode>overflow: hidden\u003C\u002Fcode> parent and spend an afternoon understanding stacking contexts. The library is excellent — it handles real complexity. But the core problem it's solving — "position this element relative to that element, and keep it there" — is something the browser should have always owned.\u003C\u002Fp>",{"id":97,"html":98,"type":86},"b4","\u003Cp>As of 2026, it does — in every major engine.\u003C\u002Fp>",{"id":100,"html":101,"text":101,"type":102,"level":31},"b5","The anchor model","heading",{"id":104,"html":105,"type":86},"b6","\u003Cp>CSS Anchor Positioning works in two steps: an element declares itself an anchor, then a floating element positions itself relative to it.\u003C\u002Fp>",{"id":107,"html":108,"type":86},"b7","\u003Cp>The anchor declares its name using a custom property (dashed-ident, same syntax as CSS variables):\u003C\u002Fp>",{"id":110,"code":111,"type":90,"language":63,"highlight":112},"b8",".trigger-button {\n  anchor-name: --my-tooltip-anchor;\n}",[],{"id":114,"html":115,"type":86},"b9","\u003Cp>The floating element links to it and uses the \u003Ccode>anchor()\u003C\u002Fcode> function to express where it should sit:\u003C\u002Fp>",{"id":117,"code":118,"type":90,"language":63,"highlight":119},"b10",".tooltip {\n  position: absolute;\n  position-anchor: --my-tooltip-anchor;\n  bottom: anchor(top);        \u002F* align my bottom edge to anchor's top edge *\u002F\n  left: anchor(center);       \u002F* align my left edge to anchor's horizontal center *\u002F\n  transform: translateX(-50%);\n  margin-bottom: 8px;\n}",[],{"id":121,"html":122,"type":86},"b11","\u003Cp>The \u003Ccode>anchor()\u003C\u002Fcode> function is the engine. Its argument names which edge or midpoint of the anchor to reference: \u003Ccode>top\u003C\u002Fcode>, \u003Ccode>bottom\u003C\u002Fcode>, \u003Ccode>left\u003C\u002Fcode>, \u003Ccode>right\u003C\u002Fcode>, \u003Ccode>center\u003C\u002Fcode>, \u003Ccode>start\u003C\u002Fcode>, \u003Ccode>end\u003C\u002Fcode>. Those values are then used in standard inset properties — \u003Ccode>top\u003C\u002Fcode>, \u003Ccode>bottom\u003C\u002Fcode>, \u003Ccode>left\u003C\u002Fcode>, \u003Ccode>right\u003C\u002Fcode>, \u003Ccode>inset-inline-start\u003C\u002Fcode>, etc.\u003C\u002Fp>",{"id":124,"html":125,"type":86},"b12","\u003Cp>No JavaScript. No event listeners. The browser computes the anchor's position in the layout, resolves the floating element's insets against it, and keeps both in sync through reflows, resizes, and scrolls.\u003C\u002Fp>",{"id":127,"html":128,"text":129,"type":102,"level":31},"b13","\u003Ccode>position-area\u003C\u002Fcode> for common placements","position-area for common placements",{"id":131,"html":132,"type":86},"b14","\u003Cp>For the eight standard compass placements, there is a higher-level shorthand: \u003Ccode>position-area\u003C\u002Fcode>. It describes where the floating element lands relative to a 3×3 grid centered on the anchor:\u003C\u002Fp>",{"id":134,"code":135,"type":90,"language":63,"highlight":136},"b15",".tooltip {\n  position: absolute;\n  position-anchor: --my-tooltip-anchor;\n  position-area: top center;   \u002F* above, horizontally centered *\u002F\n  margin-bottom: 8px;\n}",[],{"id":138,"html":139,"type":86},"b16","\u003Cp>The grid vocabulary: \u003Ccode>top\u003C\u002Fcode>, \u003Ccode>center\u003C\u002Fcode>, \u003Ccode>bottom\u003C\u002Fcode> on the block axis; \u003Ccode>left\u003C\u002Fcode>, \u003Ccode>center\u003C\u002Fcode>, \u003Ccode>right\u003C\u002Fcode> (or the writing-mode-aware \u003Ccode>start\u003C\u002Fcode>, \u003Ccode>center\u003C\u002Fcode>, \u003Ccode>end\u003C\u002Fcode>) on the inline axis. Combine them to get any of the eight placements:\u003C\u002Fp>",{"id":141,"code":142,"type":90,"language":63,"highlight":143},"b17","position-area: bottom right;   \u002F* below and to the right *\u002F\nposition-area: top span-all;   \u002F* above, stretching the full width of the anchor *\u002F\nposition-area: inline-start;   \u002F* to the inline-start side (left in LTR) *\u002F",[],{"id":145,"html":146,"type":86},"b18","\u003Cp>Use \u003Ccode>position-area\u003C\u002Fcode> for standard placements. Use \u003Ccode>anchor()\u003C\u002Fcode> directly when you need precise edge-to-edge control — for example, a dropdown that should align its left edge exactly with the anchor's left edge rather than centering.\u003C\u002Fp>",{"id":148,"html":149,"text":150,"type":102,"level":31},"b19","Viewport overflow: \u003Ccode>position-try-fallbacks\u003C\u002Fcode>","Viewport overflow: position-try-fallbacks",{"id":152,"html":153,"type":86},"b20","\u003Cp>The main reason you installed \u003Ccode>flip()\u003C\u002Fcode> and \u003Ccode>shift()\u003C\u002Fcode> middleware is viewport overflow: the tooltip was about to render off-screen, so the library flips it to the other side. CSS Anchor Positioning handles this natively with \u003Ccode>position-try-fallbacks\u003C\u002Fcode>:\u003C\u002Fp>",{"id":155,"code":156,"type":90,"language":63,"highlight":157},"b21",".tooltip {\n  position: absolute;\n  position-anchor: --my-tooltip-anchor;\n  position-area: top center;\n  margin-bottom: 8px;\n\n  position-try-fallbacks: bottom center, left center, right center;\n}",[],{"id":159,"html":160,"type":86},"b22","\u003Cp>The browser tries \u003Ccode>top center\u003C\u002Fcode> first. If the tooltip overflows the viewport in that position, it tries \u003Ccode>bottom center\u003C\u002Fcode>. If that overflows, it tries \u003Ccode>left center\u003C\u002Fcode>, then \u003Ccode>right center\u003C\u002Fcode>. The first placement that fits without overflow wins.\u003C\u002Fp>",{"id":162,"html":163,"type":86},"b23","\u003Cp>For the common case of just flipping across one axis, there are keyword shorthands:\u003C\u002Fp>",{"id":165,"code":166,"type":90,"language":63,"highlight":167},"b24","position-try-fallbacks: flip-block, flip-inline;",[],{"id":169,"html":170,"type":86},"b25","\u003Cp>\u003Ccode>flip-block\u003C\u002Fcode> means "try the opposite block edge" — if you specified \u003Ccode>top\u003C\u002Fcode>, try \u003Ccode>bottom\u003C\u002Fcode>. \u003Ccode>flip-inline\u003C\u002Fcode> means "try the opposite inline side." You can combine them: \u003Ccode>flip-block flip-inline\u003C\u002Fcode> tries the diagonally opposite placement.\u003C\u002Fp>",{"id":172,"html":173,"type":86},"b26","\u003Cp>This replaces the \u003Ccode>flip()\u003C\u002Fcode> and \u003Ccode>shift()\u003C\u002Fcode> middleware for the common use cases without any JavaScript.\u003C\u002Fp>",{"id":175,"html":176,"type":86},"b27","\u003C!-- playground:start -->",{"id":178,"html":179,"text":179,"type":102,"level":31},"b28","🎮 Try it yourself",{"id":181,"html":182,"type":86},"b29","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-18-css-anchor-positioning\u002Fplayground\u002F\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":184,"html":185,"type":86},"b30","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":187,"html":188,"type":86},"b31","\u003C!-- playground:end -->",{"id":190,"html":191,"text":191,"type":102,"level":31},"b32","What you still need a library for",{"id":193,"html":194,"type":86},"b33","\u003Cp>CSS Anchor Positioning handles positioning and overflow. It does not handle every case.\u003C\u002Fp>",{"id":196,"html":197,"type":86},"b34","\u003Cp>The \u003Ccode>position-try-fallbacks\u003C\u002Fcode> detection is binary: either the element fits at a given placement or it doesn't. It does not compute how much space is available at each candidate and pick the largest. If you need "prefer below, but only if there are at least 200px of vertical clearance," you still need JavaScript.\u003C\u002Fp>",{"id":199,"html":200,"type":86},"b35","\u003Cp>Containment is another gap. If your floating element is inside an \u003Ccode>overflow: hidden\u003C\u002Fcode> parent — a scroll container, a card with clipping — it will clip there just like any other positioned element. The fix is to render the floating element in the \u003Cstrong>top layer\u003C\u002Fstrong>, which the Popover API handles. Combining \u003Ccode>popover="manual"\u003C\u002Fcode> with anchor positioning is the full modern stack: the popover attribute gets you out of the stacking context, anchor positioning places you correctly relative to the trigger.\u003C\u002Fp>",{"id":202,"html":203,"type":86},"b36","\u003Cp>Arrow indicators — the triangle that connects the tooltip to the trigger — are not automatic. You can compute the arrow position manually using \u003Ccode>anchor()\u003C\u002Fcode> values in a \u003Ccode>::before\u003C\u002Fcode> pseudo-element, but it takes a few extra lines and isn't as polished as a library's arrow plugin out of the box.\u003C\u002Fp>",{"id":205,"html":206,"text":206,"type":102,"level":31},"b37","Browser support",{"id":208,"html":209,"type":86},"b38","\u003Cp>CSS Anchor Positioning is \u003Cstrong>Baseline 2026\u003C\u002Fstrong>: Chrome\u002FEdge 125 (2024), Safari 26 (2025), and Firefox 147 (early 2026) — Firefox was the last engine to ship it, which is what tipped the feature into Baseline. It's now supported unflagged in every current browser. No flag, no polyfill, no build step.\u003C\u002Fp>",{"id":211,"html":212,"type":86},"b39","\u003C!-- quiz:start -->",{"id":214,"html":215,"text":215,"type":102,"level":31},"b40","🧠 Test yourself",{"id":217,"html":218,"type":86},"b41","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-18-css-anchor-positioning\">Take the 8-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":220,"html":221,"type":86},"b42","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":223,"html":224,"type":86},"b43","\u003C!-- quiz:end -->",{"id":226,"html":227,"text":227,"type":102,"level":31},"b44","The takeaway",{"id":229,"html":230,"type":86},"b45","\u003Cp>Floating UI is an excellent library — but most of what it does at the positioning layer is the browser's job. For the common cases — tooltips, dropdowns, label overlays, context menus — \u003Ccode>anchor-name\u003C\u002Fcode> and \u003Ccode>position-anchor\u003C\u002Fcode> replace the installation entirely. \u003Ccode>position-area\u003C\u002Fcode> replaces the placement config. \u003Ccode>position-try-fallbacks\u003C\u002Fcode> replaces \u003Ccode>flip()\u003C\u002Fcode> and \u003Ccode>shift()\u003C\u002Fcode>.\u003C\u002Fp>",{"id":232,"html":233,"type":86},"b46","\u003Cp>The pattern is the same one you have seen with the Popover API and scroll-driven animations: the browser absorbed the use case that a library existed to fill. You do not have to stop using Floating UI immediately. But the next tooltip you build, try starting with two CSS properties. The library is an escape hatch for the complex cases, not the baseline anymore.\u003C\u002Fp>",{"id":235,"type":236},"b47","divider",{"id":238,"html":239,"type":86},"b48","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":241,"type":242,"items":243,"ordered":18},"b49","list",[244,245,246,247,248],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>","Here is the code you have written, or something close to it, for every tooltip on every project:\n\n```js\nimport { computePosition, flip, shift, offset } from '@floating-ui\u002Fdom';\n\nconst { x, y } = await computePosition(button, tooltip, {\n  placement: 'top',\n  middleware: [offset(8), flip(), shift({ padding: 8 })],\n});\n\nObject.assign(tooltip.style, {\n  left: `${x}px`,\n  top: `${y}px`,\n});\n```\n\nThen you wire it to a ResizeObserver so it recomputes when the button moves. Then a scroll listener for the same reason. Then you discover the tooltip clips inside an `overflow: hidden` parent and spend an afternoon understanding stacking contexts. The library is excellent — it handles real complexity. But the core problem it's solving — \"position this element relative to that element, and keep it there\" — is something the browser should have always owned.\n\nAs of 2026, it does — in every major engine.\n\n## The anchor model\n\nCSS Anchor Positioning works in two steps: an element declares itself an anchor, then a floating element positions itself relative to it.\n\nThe anchor declares its name using a custom property (dashed-ident, same syntax as CSS variables):\n\n```css\n.trigger-button {\n  anchor-name: --my-tooltip-anchor;\n}\n```\n\nThe floating element links to it and uses the `anchor()` function to express where it should sit:\n\n```css\n.tooltip {\n  position: absolute;\n  position-anchor: --my-tooltip-anchor;\n  bottom: anchor(top);        \u002F* align my bottom edge to anchor's top edge *\u002F\n  left: anchor(center);       \u002F* align my left edge to anchor's horizontal center *\u002F\n  transform: translateX(-50%);\n  margin-bottom: 8px;\n}\n```\n\nThe `anchor()` function is the engine. Its argument names which edge or midpoint of the anchor to reference: `top`, `bottom`, `left`, `right`, `center`, `start`, `end`. Those values are then used in standard inset properties — `top`, `bottom`, `left`, `right`, `inset-inline-start`, etc.\n\nNo JavaScript. No event listeners. The browser computes the anchor's position in the layout, resolves the floating element's insets against it, and keeps both in sync through reflows, resizes, and scrolls.\n\n## `position-area` for common placements\n\nFor the eight standard compass placements, there is a higher-level shorthand: `position-area`. It describes where the floating element lands relative to a 3×3 grid centered on the anchor:\n\n```css\n.tooltip {\n  position: absolute;\n  position-anchor: --my-tooltip-anchor;\n  position-area: top center;   \u002F* above, horizontally centered *\u002F\n  margin-bottom: 8px;\n}\n```\n\nThe grid vocabulary: `top`, `center`, `bottom` on the block axis; `left`, `center`, `right` (or the writing-mode-aware `start`, `center`, `end`) on the inline axis. Combine them to get any of the eight placements:\n\n```css\nposition-area: bottom right;   \u002F* below and to the right *\u002F\nposition-area: top span-all;   \u002F* above, stretching the full width of the anchor *\u002F\nposition-area: inline-start;   \u002F* to the inline-start side (left in LTR) *\u002F\n```\n\nUse `position-area` for standard placements. Use `anchor()` directly when you need precise edge-to-edge control — for example, a dropdown that should align its left edge exactly with the anchor's left edge rather than centering.\n\n## Viewport overflow: `position-try-fallbacks`\n\nThe main reason you installed `flip()` and `shift()` middleware is viewport overflow: the tooltip was about to render off-screen, so the library flips it to the other side. CSS Anchor Positioning handles this natively with `position-try-fallbacks`:\n\n```css\n.tooltip {\n  position: absolute;\n  position-anchor: --my-tooltip-anchor;\n  position-area: top center;\n  margin-bottom: 8px;\n\n  position-try-fallbacks: bottom center, left center, right center;\n}\n```\n\nThe browser tries `top center` first. If the tooltip overflows the viewport in that position, it tries `bottom center`. If that overflows, it tries `left center`, then `right center`. The first placement that fits without overflow wins.\n\nFor the common case of just flipping across one axis, there are keyword shorthands:\n\n```css\nposition-try-fallbacks: flip-block, flip-inline;\n```\n\n`flip-block` means \"try the opposite block edge\" — if you specified `top`, try `bottom`. `flip-inline` means \"try the opposite inline side.\" You can combine them: `flip-block flip-inline` tries the diagonally opposite placement.\n\nThis replaces the `flip()` and `shift()` middleware for the common use cases without any JavaScript.\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-18-css-anchor-positioning\u002Fplayground\u002F)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n## What you still need a library for\n\nCSS Anchor Positioning handles positioning and overflow. It does not handle every case.\n\nThe `position-try-fallbacks` detection is binary: either the element fits at a given placement or it doesn't. It does not compute how much space is available at each candidate and pick the largest. If you need \"prefer below, but only if there are at least 200px of vertical clearance,\" you still need JavaScript.\n\nContainment is another gap. If your floating element is inside an `overflow: hidden` parent — a scroll container, a card with clipping — it will clip there just like any other positioned element. The fix is to render the floating element in the **top layer**, which the Popover API handles. Combining `popover=\"manual\"` with anchor positioning is the full modern stack: the popover attribute gets you out of the stacking context, anchor positioning places you correctly relative to the trigger.\n\nArrow indicators — the triangle that connects the tooltip to the trigger — are not automatic. You can compute the arrow position manually using `anchor()` values in a `::before` pseudo-element, but it takes a few extra lines and isn't as polished as a library's arrow plugin out of the box.\n\n## Browser support\n\nCSS Anchor Positioning is **Baseline 2026**: Chrome\u002FEdge 125 (2024), Safari 26 (2025), and Firefox 147 (early 2026) — Firefox was the last engine to ship it, which is what tipped the feature into Baseline. It's now supported unflagged in every current browser. No flag, no polyfill, no build step.\n\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 8-question quiz →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-18-css-anchor-positioning)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n## The takeaway\n\nFloating UI is an excellent library — but most of what it does at the positioning layer is the browser's job. For the common cases — tooltips, dropdowns, label overlays, context menus — `anchor-name` and `position-anchor` replace the installation entirely. `position-area` replaces the placement config. `position-try-fallbacks` replaces `flip()` and `shift()`.\n\nThe pattern is the same one you have seen with the Popover API and scroll-driven animations: the browser absorbed the use case that a library existed to fill. You do not have to stop using Floating UI immediately. But the next tooltip you build, try starting with two CSS properties. The library is an escape hatch for the complex cases, not the baseline anymore.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":251,"canonical":252,"description":253},"You're using Floating UI to position your tooltip. The browser does it","https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fcss-anchor-positioning","CSS Anchor Positioning is Baseline 2026 — it lets any element declare itself an anchor and any floating element position relative to it in pure CSS. No JavaScript, no layout math, ","019fe660-48c5-70fe-a5b4-b5b66da8fdf4",{"id":256,"locked":18},"019fe660-4fb5-731b-b9d3-09fae106666e",[258],{"id":33,"slug":34,"title":36,"_count":259},{"questions":39},[261],{"locale":13,"slug":34},{"id":33,"slug":34,"title":36,"_count":263,"questionCount":39},{"questions":39}]