CSS Anchor Positioning:重新定义「锚定定位」的时代来了!

📌 CSS Anchor Positioning:重新定义「锚定定位」的时代来了!

你是否在做 Tooltip、Popper、气泡卡片时,被繁杂的定位计算和 JS 逻辑折磨?CSS Anchor Positioning 正式登场,用纯 CSS 的方式精确「锚定」任意元素,一次性解决层叠、滚动、居中等定位痛点!

🎯 什么是 Anchor Positioning?

CSS Anchor Positioning 是一项仍在草案中的新特性,由 Chrome 125 开始提供原生支持(需启用实验 flag)。它允许你在 CSS 中通过锚点(anchor)来相对于任意 DOM 元素定位,而不是传统的父级元素。

就像 position: absolute 的终极进化版本。

🧩 它解决了哪些痛点?

  • ✅ 弹出层的定位:Tooltip、菜单、卡片等,无需 JS 计算偏移;
  • ✅ 自动适应视窗滚动:内建防止遮挡逻辑;
  • ✅ 任意锚定目标:不仅限于父元素;
  • ✅ 支持多锚点选择、优先级设置等;

📺 实战演示:实现一个纯 CSS 的 Tooltip

🖼️ 先上效果图!

✅ HTML 结构

html 复制代码
<!-- html -->
<div class="anchor">⚓︎</div>
<p class="positionedElement">This is a positioned element.</p>

🎨 CSS 样式

css 复制代码
/* css */
:root {
      --anchor-width: 60px;
      --anchor-height: 90px;
    }

    .anchor {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      // 主要实现部分!
      anchor-name: --infobox;
      background: palegoldenrod;
      font-size: 3em;
      width: var(--anchor-width);
      height: var(--anchor-height);
      border: 1px solid goldenrod;
      text-align: center;
    }

    .positionedElement {
      display: none;
      position: absolute;
      // 主要实现部分!
      position-anchor: --infobox;
      margin: 0;
      top: anchor(top);
      left: anchor(right);
      bottom: anchor(bottom);
      background-color: olive;
      transform: translate(calc(var(--anchor-width)/2 * -1), calc(var(--anchor-height)/2 * -1));
      border: 1px solid darkolivegreen;
    }

💡javascript

javascript 复制代码
// 可以看到我的js中没有任何的关于位置计算的代码!
const tip = document.querySelector('.positionedElement')
    const anchor = document.querySelector('.anchor')
    anchor.addEventListener('mouseenter', () => {
      tip.style.display = 'block'
    })
    anchor.addEventListener('mouseleave', () => {
      tip.style.display = 'none'
    })

👆 利用 anchor() 函数直接"锁定"另一个元素的位置。position-anchor 可绑定任意锚点。

🔍 说明:

  • anchor-name 定义锚点;
  • position-anchor 绑定锚点;
  • anchor() 使用已经定义好的锚点的位置;
  • 全程无 JS 计算偏移!

📦 浏览器兼容性(截至 2025 年 6 月)

浏览器 支持情况
Chrome 125+ ✅ 实验开启(部分已经默认开启)
Safari 🚫 尚未支持
Firefox 🚫 尚未支持
Edge ✅ 同 Chrome

📌 可在 chrome://flags/#enable-anchor-positioning 中启用实验(如果没找到对应的开启选项,那么可能已经默认开启)。

🔧 进阶玩法

  • 支持 fallback() 自动选择备用定位;
  • 支持 anchor(top center) 精细锚定;
  • 可结合 @position-try 指令控制定位策略(与 Popover API 搭配);
  • 更高自由度的浮层管理逻辑!

🧠 总结

CSS Anchor Positioning 是前端定位机制的一次飞跃,将原本依赖 JS 逻辑的工作交还给 CSS 实现 ,大大简化了弹出层、提示框等组件的开发。 未来,当它全面落地,你的前端弹层逻辑无需任何的js计算!!!

👍 如果你觉得这篇文章有帮助,欢迎点赞、收藏,让更多人了解 CSS 的新能力!

相关推荐
ayas123194 小时前
CSS学习
前端·css·学习
土族程序员4 小时前
JavaFX CSS @font-face 错误全面分析 loadStylesheetUnPrivileged / reportException
java·css·javafx
人生在勤,不索何获-白大侠4 小时前
day25——HTML & CSS 前端开发
前端·css·html
浩龙不eMo4 小时前
设置单行省略号后不生效?你肯定忘记了这几点!
前端·css
只与明月听4 小时前
深入Chrome DevTools Memory面板:Web内存分析
javascript·面试·html
wordbaby6 小时前
关于 CSS 线性渐变角度(linear-gradient 角度含义及记忆方法)
前端·css
Ynov7 小时前
使用jQuery动态操作HTML和CSS
css·html·jquery
金金金__9 小时前
别再乱写 style 了!CSS 选择器才是正道
css
小沙盒10 小时前
使用js把txt的url列表转换成html列表
前端·javascript·html
超浪的晨10 小时前
JavaWeb 进阶:Vue.js 与 Spring Boot 全栈开发实战(Java 开发者视角)
java·开发语言·前端·javascript·vue.js·html·个人开发