那些'登上” UI之一，带有锚定位

>进入CSS锚定位的迷人世界！本教程使用Juan Diego Rodriguez的综合“锚定定位指南”（可在CSS-Tricks上使用）作为我们的参考。

这是一个令人兴奋的发展。 许多人会回想起CSS-Tricks的“ Flexbox布局指南”和“网格布局指南”的影响 - 我仍然定期使用的宝贵资源！ 我经常兼顾多个选项卡，以确保我的编码epen实验中正确的语法。

自Juan指南以来，我一直在尝试CSS锚定位，我渴望分享我的发现，进一步了解，进一步实验，当然，

构建东西！>>

介绍CSS锚定位

锚定定位使我们可以连接或“锚” - 一个或多个其他元素。 至关重要的是，它定义了

> a“ target”元素（锚定上的元素）的定位相对于锚定位，包括sallback定位> at rule。 简单地说，锚定定位显着增强了>，帮助绝对位置的元素的行为可以预见。 我们将详细探讨这一点。 @position-try>当前是W3C草稿规格，锚定位相对较新。 它在基线中被标记为“有限的可用性”，这意味着它主要由基于铬的浏览器（版本125）支持。 但是，Oddbird为更广泛的浏览器兼容性提供了有用的多填充。

>

position: absolute;

>浏览器支持详细信息可在caniuse.com上找到。 一个数字指示支持开始的版本。

>

桌面浏览器支持

>移动/平板电脑浏览器支持

Oddbird为许多新的CSS功能创建多填充。支持他们在github或开放集体上的工作！

> W3C规格的贡献者

> TAB ATKINS-BITTNER在CSS Day 2024（YouTube上可用）提出了锚定位。 胡安（Juan）展示了其与视图驱动的动画一起使用的，以对CSS-Tricks产生浮动音符效果。 凯文·鲍威尔（Kevin Powell）在最近的视频中展示了“ CSS弹出锚定位”，托马斯公园（Thomas Park

>分配

>现在我们了解CSS锚定位，让我们探索其功能。 束缚元素具有巨大的潜力，解决了以前通过复杂的绝对定位和调整解决的许多问题。

让我们检查基本语法。我们需要两个元素：一个锚定元素及其束缚目标。 z-index

我们使用

，一个唯一名称（带有双重符号的锚定元素，例如CSS自定义属性）。

<div>
  Anchor
</div>
<div>
  Target
</div>

目标元素需要

和anchor-name（与锚的

匹配）。

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

这些元素现在已链接。 position: absolute;>在锚元件上创建一个看不见的3x3网格，允许精确的目标放置。position-anchor anchor-name

现在，目标固定在锚元件的顶部中心！

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
}

>

锚定伪元素position-area

伪元素可以像常规元素一样锚定：

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
  position-area: top center;
}

这对于添加视觉增强或指示器很有用。

>

移动锚

可以使用

函数而不是

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;

  &::before {
    content: "Target";
    position: absolute;
    position-anchor: --anchor;
    left: anchor(center);
    bottom: anchor(center);
  }
}

>。

。

函数使用锚元素的计算值。 在这里，目标的

匹配锚的anchor()。 悬停的变化>是可能的。position-area>

高级实验

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor-one;
  top: anchor(bottom);
  left: anchor(left);
}

Chrome Team发布了和anchor()元素的新伪选择器（top）。 这些也可以锚定。 这是实验性的，但证明了潜力。 bottom实用应用position-anchor

让我们探索CSS锚定位的实际用途（目前仅镀铬）。>

>工具提示

工具提示是一种自然拟合。 悬停在图标上显示附近的标签。 Zell Liew关于Tooltip最佳实践的文章提供了语义指导。<details></details>> <summary></summary> :details-content工具提示是锚元素的兄弟姐妹（

链接它们）。 CSS处理定位和可见性。

>工作CSS锚定工具提示！ 考虑使用触摸设备的toggletips。

浮动披露

>披露（类似于

/<summary></summary>

）受益于锚定定位，尤其是对于浮动元素。 POPOVER API提供了一种非模式的顶层解决方案，其功能诸如浅液。 Zell Liew提供了有关弹出案，对话和模式的更多信息。

>

>下拉菜单示例：

<div>
  Anchor
</div>
<div>
  Target
</div>

> CSS处理锚定和后备定位：

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

购物车组件

结合以前的技术，我们可以创建一个购物车组件：>

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15banchor {
  anchor-name: --anchor;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
}

> CSS锚定工具提示，购物车对话框和徽章：

锚定在一个锚！

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15btarget {
  position: absolute;
  position-anchor: --anchor;
  position-area: top center;
}

上的三个元素

组合技术

>本节展示了工具提示，披露和徽章的联合使用，展示了锚定位的力量。

最终项目：入职工具

作为最终项目，我构建了一个CSS锚定位置工具（可用的Codepen）。 这避免了我以前基于JavaScript的尝试的复杂性（“ HandholdJs”）。

自定义元素

使用

>属性来定义游览步骤。 JavaScript动态更新锚位置，并且视图过渡可确保平稳的过渡。 该项目是实验性的，由于浏览器的支持有限，因此未准备好生产。

>

结论<hand-hold></hand-hold> data-tour-stop> CSS锚定定位有可能革新CSS开发，类似于Flexbox和Grid。 它的应用非常广泛，我很高兴看到社区的未来创新。

以上是那些'登上” UI之一，带有锚定位的详细内容。更多信息请关注PHP中文网其他相关文章！