AI 摘要：文章探讨了 CSS 锚点定位（CSS Anchor Positioning）API 的一种高级用法：通过动态更新 anchor-name（锚点名称），让一个定位元素（Follower）在多个潜在锚点之间平滑切换。这种“随动”模式不仅支持纯 CSS 的悬浮（hover）和焦点（focus）触发，还能结合 JavaScript 状态管理或最新的 ::scroll-marker 伪元素，实现极简且高性能的导航高亮、焦点跟随等视觉交互效果。

1. 技术核心原理 (The Technique)
• 动态锚点绑定：创建一个具有固定 position-anchor 名称的跟随元素，并在交互（如 :hover ）时将对应的 anchor-name 赋值给当前目标，实现定位目标的动态切换。
• 平滑过渡动画：利用 CSS transition 作用于 top、left 等属性，使跟随元素在不同锚点间移动时产生平滑的动画效果。
• 定位限制：目前 position-area 属性尚不支持动画过渡，因此实现平滑移动仍需依赖绝对定位属性（如 top, left, right, bottom）。

2. 实际应用案例
• 操作栏 (Action Bar)：结合 JavaScript 处理点击状态，并利用 CSS 处理悬浮和焦点态，实现一个类似“放大镜”或“高亮框”在导航项间流转的视觉效果。
• 轮播图滚动指示器 (Carousel Scroll Markers)：展示了纯 CSS 的方案，利用 ::scroll-marker 伪元素和 :target-current 伪类，在用户滚动时自动更新锚点名称，驱动指示器跟随。

3. 兼容性与进阶技巧 (Compatibility & Tips)
• 浏览器支持：该技术基于 CSS Anchor Positioning API，目前已在 Chromium 内核浏览器上线，并被列入 Interop 2025，WebKit (Safari) 也即将支持。
• 体验优化：通过伪元素技巧（Pseudo element trick）可以防止鼠标在元素间移动时因间隙导致的状态丢失。
• 性能优势：相比于传统依赖 JS 计算 getBoundingClientRect() 的方案，该方法将布局计算交给浏览器内核，性能更优且代码更简洁。

AI 摘要：本文是作者关于使用 CSS 锚点定位技术连接圆圈系列的第二部分，主要关注在连接两个圆圈的箭头内部计算并显示它们之间的距离。文章展示了改进后的 HTML 结构和 CSS 变量定义，并通过交互式 CodePen 示例演示了拖动圆圈时距离实时更新的效果，但目前该功能仅支持 Chrome 浏览器。

1. 引言与目的
• 前言回顾：基于前一篇关于连接圆圈的实现。
• 核心改进：在箭头形状内增加计算并显示两个圆圈之间距离的功能。
2. 技术实现细节
• HTML 结构：展示了使用 div 元素分别表示圆圈 (circle) 和连接箭头 (arrow) 的基本结构，其中 arrow 元素通过 x, y 等属性引用圆圈。
• CSS 变量：定义了用于控制箭头尺寸（--r, --a, --d）、圆圈与箭头间距（--g）以及颜色（--c）的关键 CSS 变量。
3. 交互式演示与局限性
• 实时更新：通过 CodePen 演示，用户可以拖动圆圈，观察距离值如何在箭头内部实时更新。
• 多圆圈示例：提供了一个包含多个圆圈的 CodePen 演示，展示了该技术在更复杂场景下的应用潜力。
• 浏览器兼容性：目前该功能仅在 Chrome 浏览器中支持。
4. 相关资源与拓展阅读
• 前作链接：提供了《Connecting Circles With Anchor Positioning》的链接，方便读者了解原始实现。
• 其他 CSS 技巧：列举了作者的其他 CSS 技巧文章，如《Fizz Buzz using Modern CSS (no HTML)》。

Css-Tip

Connecting Circles With Anchor Positioning II

Connect circles with arrows and show their distance using modern CSS

AI 摘要：Chrome 143+ 引入 CSS 锚点定位回退检测机制，可自动检测容器布局变化并动态切换定位方向，解决传统锚点定位在空间受限时的显示异常问题。

AI 摘要：文章是 Temani Afif 系列博文《Perfectly Pointed Tooltips》的第三篇，重点介绍如何在 CSS 中使用 Anchor Positioning API 将 tooltip（提示框）的箭头精准定位到锚点（anchor）的四个角落。作者通过 margin 控制间距、clip-path 实现遮罩、anchor-size() 获取锚点尺寸等一系列技巧，展示如何让 tooltip 更灵活地响应位置变化，并指出未来 Anchor Positioning Level 2 将带来更多动态布局可能性。

1. 背景与目标
• 延续前两篇 tooltip 教程，本篇聚焦「指向角落」的布局挑战。
• 仅 Chrome 与 Edge 目前完全支持所用特性。
• 本次重点是探索新定位与隐藏技巧，非基础概念重复。

2. 定义 tooltip 位置信息
• 使用 position-area: top left、top right、bottom left、bottom right 指定初始角落位置。
• 利用 position-try-fallbacks: flip-inline, flip-block, ... 实现自动翻转（flip）策略。
• 解释为何此配置能灵活调整尺寸但在添加尾部（tail）时复杂度更高。

3. 添加尾部 (Tail) 的新思路
• 使用伪元素 ::before 并引入 Anchor Positioning API 的 anchor-size() 函数。
• 绘制覆盖锚点的方形区域，并基于变量 --d（间距）与 --s（半径、尾部大小）动态扩展尺寸。
• 通过 clip-path 制造四角尾部形状，可替换为渐变、SVG、shape() 等方式实现个性化设计。

4. 隐藏多余的尾部
• 核心技巧：clip-path: inset(0) margin-box;
• clip-path 基于 margin-box 创建可视区域，仅保留一个角的尾部。
• 虽然伪元素为 fixed 定位，但仍属于 tooltip 内容，可被父元素裁切。

5. 扩展与实作练习
• 展示多种使用同技巧更新的示例及 debug mode 调试展示。
• 鼓励读者重新实现前两篇的版本作练习，并尝试新增曲线尾部样式。

6. 总结与展望
• 通过 Anchor Positioning API 可以让 tooltip 的行为更动态、更响应式。
• 强调现代 CSS 已超越单纯静态样式，可跨元素定义交互定位。
• Anchor Positioning Level 2 预计引入可查询 fallback 位置与更灵活的动态控制。

Frontend Masters

Perfectly Pointed Tooltips: To The Corners

Ready for the last challenge?

AI 摘要：本文系统介绍了 CSS 锚点定位（Anchor Positioning）基础：通过为任意元素定义锚（anchor-name）并在目标元素使用 position-anchor、anchor() 或 position-area 等特性，实现在不重构 DOM 的前提下，将元素稳定地相对其他元素对齐，并用 position-try-fallbacks（如 flip-block、flip-inline）优雅处理视口溢出问题；文章配有交互示例与实践建议，并提示当前浏览器支持仍以 Chrome 为主，Safari/Firefox 仍待完善。

1. 背景与问题
• 回顾传统 position 定位的局限：绝对定位只能相对最近的定位父级，无法跨层级对齐；为对齐常被迫调整 DOM 结构，维护成本高。
• 实战场景：卡片布局中，将分类标签叠放在图片角落；当卡片改为横向布局时，基于父容器的绝对定位失效，出现脆弱的“魔法数”方案。

2. Anchor Positioning 基础能力
• 定义锚元素：在被参考的元素上设置 anchor-name，作为锚点。
• 目标关联：在目标元素上用 position-anchor 引用锚。
• 使用 anchor() 对齐：通过 anchor(top/right/bottom/left) 将目标 inset 到锚的边缘，可在任意布局变更下保持稳定相对位置。
• 要点：锚与目标无需同容器；适用于徽标、角标、标签、弹出层等跨层级对齐需求。

3. position-area 与 3x3 网格
• 核心概念：position-area 在锚周围生成 3x3 网格，以“方位 + 对齐”（如 top center）描述目标落位，更直观。
• 跨单元格：span-* 语法（如 span-right）让目标横纵向跨越多个单元格，便于描述宽度或高度延展。
• 实用场景：快速布置弹出层、提示框在锚的上/下/左/右及边角位置，减少复杂的位移计算。

4. 自适应回退与溢出处理
• position-try-fallbacks：声明回退策略以处理视口或容器溢出，减少对 JS 的依赖。
• flip-block：在块轴（垂直方向）空间不足时，自动上下翻转（如弹层从上侧切换到底侧）。
• flip-inline：在内联轴（水平方向）空间不足时，自动左右翻转（与 span-right 等组合更灵活）。
• 可视化与调试：示例中提供锚区域可视化，便于预判翻转与回退路径。

5. 兼容性与实践建议
• 浏览器支持：当前以 Chrome 桌面端体验最佳；Safari TP 中 position-area 示例存在问题；期待 Firefox 与 Safari 稳定支持。
• 开发建议：优先用锚点定位替代脆弱的绝对定位与“魔法数”；为弹出层与标签类组件提供更稳健的跨容器对齐与溢出回退。
• 资源延伸：CSS Anchor Positioning 规范与入门文章，帮助深入理解 API 设计与更多用例。

Ishadeed

The Basics of Anchor Positioning

Learn the basics of Anchor Positioning in CSS