那些'登上” 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中文網其他相關文章！