錨定位怪癖

> 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中文網其他相關文章！