锚定位怪癖

> CSS-Tricks Almanac现在拥有对新锚定位API的全面覆盖，详细介绍了每个属性，功能和规则。 我最近对这个模块的深入研究发现了一些有趣的怪癖和潜在的错误，我将在这里探索，以节省一些头部抓手。

插图修饰包含块（IMCB）

>静态元素的包含块很简单（父母的内容区域），但绝对定位的元素会引入复杂性。 它们的包含块通常是视口或最近的位置祖先。 但是，包含块（imcb）的插图修饰增加了一层细微差别，特别与锚定位有关。

在规格中将IMCB定义为绝对位置元素的

属性（inset>，top，right，bottom）有效地缩小的块。 left例如：

>在这里，IMCB小于视口，由指定的插图值还原。 了解IMCB对于掌握锚定定位至关重要，尤其是

.absolute {
  position: absolute;
  top: 80px;
  right: 120px;
  bottom: 180px;
  left: 90px;
}

>和

>属性。 position-area将包含的块划分为网格，而IMCB定义了该网格中的定位区域。 position-try-order>使用IMCB尺寸来确定后备定位。 Una kravets的视觉工具，网址为position-area https://www.php.cn/link/7e77e4a1b051ec0a510b48eec2f3a3cposition-try-order>提供了出色的可视化。 >规范与实施：快速发展的故事

>规格是有价值的指南，但现实世界中的浏览器实施揭示了差异。 锚定定位的快速发展和部署（2023年6月首次草稿，Chrome 125发布）导致规格和浏览器行为之间有一些初始不一致。 初始浏览器实现后进行的更改包括：

• inset-area>重命名为position-area：inset-area已弃用，使用position-area>。
。
• position-try-options重命名为position-try-fallbacks：>使用position-try-fallbacks。
• > inset-area()函数已删除：不再需要包装器功能。 position-try-fallbacks
• 简化：现在可以使用一个更简洁的语法。anchor(center)> >
bugs：
• >存在几个错误，尤其是关于的行为，当缺失默认锚和默认行为时。 position-area>可访问性注意事项position-visibility
锚定定位在工具提示和弹出窗口方面出色时，将其用于纯粹的装饰目的（例如，将元素与线路连接）可能会阻碍可访问性。 屏幕读取器可能不了解视觉链接但语义上无关的元素之间的关系。 建议使用诸如

>和

之类的ARIA属性来建立清晰的语义关系，从而确保辅助技术的可访问性。

结论aria-describedby role掌握锚定位需要导航其复杂性。 尽管CSS-Tricks年鉴提供了宝贵的资源，但请记住，API仍在发展，有望提供进一步的学习机会和潜在的未来改进。

以上是锚定位怪癖的详细内容。更多信息请关注PHP中文网其他相关文章！