AI 摘要：本文介绍了如何使用 CSS 的锚点定位（anchor positioning）技术来摆脱 HTML 源代码顺序的限制，使得元素的定位更加灵活和简便。通过实例展示了如何将一个 div 覆盖在另一个 div 上，并详细解释了锚点定位的实现方法和优点。

• 简介
• 文章以十个 div 进入酒吧的比喻开始，解释了当空间不足时，如何让一个 div 坐在另一个 div 的“腿上”。
• 强调了 HTML 源代码顺序的重要性，因为在传统的 CSS 定位中，元素的顺序会影响定位效果。

• 传统的定位方法
• 展示了如何通过调整 HTML 源代码顺序来实现一个 div 覆盖另一个 div 的效果。
• 介绍了使用父子关系（parent-child）来定位 div 的方法。
• 详细解释了如何使用 CSS 的 position: relative 和 position: absolute 属性来实现定位，并通过 inset-block-start 和 inset-inline-start 属性将子元素固定在父元素的左上角。
• 通过设置子元素的宽度为父元素的 100%，实现完全覆盖父元素的效果。

• 锚点定位的优势
• 介绍了锚点定位技术如何简化定位过程，不再受限于 HTML 源代码顺序。
• 说明了锚点定位在最新版本的 Chrome 浏览器中默认支持。
• 展示了如何使用 anchor-name 属性定义锚点元素，并通过 position-anchor 属性将子元素与锚点元素连接。
• 解释了如何使用 position-area 属性来居中定位子元素，并通过 anchor-size() 函数设置子元素的大小以完全覆盖锚点元素。

• 结论
• 强调锚点定位技术的优点，即它不依赖于 HTML 源代码顺序，体现了 CSS 在内容和表现分离方面的优势。

CSS-Tricks

Anchor Positioning Just Don't Care About Source Order | CSS-Tricks

The fact that anchor positioning eschews HTML source order is so CSS-y because it's another separation of concerns between content and presentation.