搶先體驗！超強的 Anchor Positioning 錨點定位

本文，將向大家介紹 CSS 規範中，最新的 Anchor Positioning，翻譯爲錨點定位。

Anchor Position 的出現，極大的豐富了 CSS 的能力，雖然語法稍顯複雜，但是有了它，能夠實現非常多之前實現起來非常困難，或者壓根無法使用純 CSS 實現的功能。

何爲 Anchor Positioning？

那麼，什麼是 Anchor Positioning 呢？

Anchor Positioning 由規範 CSS Anchor Positioning 提出定義。

規範是這麼描述的：CSS absolute positioning allows authors to place elements anywhere on the page, without regard to the layout of other elements besides their containing block. This flexibility can be very useful, but also very limiting—often you want to position relative to some other element. Anchor positioning (via the anchor functions anchor() and anchor-size()) allows authors to achieve this, "anchoring" an absolutely-positioned element to one or more other elements on the page, while also allowing them to try several possible positions to find the "best" one that avoids overlap/overflow.

簡單翻譯一下，其核心就在於，Anchor Positioning（錨點定位）用於增強元素的絕對定位的能力。Anchor Positioning（錨點定位）允許我們基於其它錨點元素的位置和尺寸去定位上下文，而不是傳統意義上的基於父元素去進行絕對定位。

整個 Anchor Positioning 到底是幹啥的？其重點總結如下：

首先，錨點定位，需要我們通過新的錨點名稱（anchor-name）來標記元素，允許我們使用這些經過了標記的元素作爲我們絕對定位的基準目標；
其次，我們可以在絕對定位的元素上，通過新的語法 anchor() 或者 anchor-size() 來錨定上述被標記了的元素，並且可以使用被標記元素的相應屬性（譬如被標記元素的 top、left、right、bottom 等）
並且，還有一些更高級的用法，譬如錨點定位的 Fallback 機制，也就是可以設置多套不同的錨點定位規則，以適應更爲複雜的頁面佈局情況

下面，我們通過一個最簡單的例子，快速理解，到底什麼是錨點定位。

假設，我們有如下代碼結構：

<div class="g-container">
    <div class="g-use-anchor"></div>  
    <div class="g-anchor-element"></div>  
</div>

.g-container {
    position: relative;
    width: 50vw;
    height: 50vh;
    border: 2px solid #666;
    display: flex;
    
    .g-anchor-element {
        width: 25vw;
        height: 25vh;
        border: 2px dashed #333;
        margin: auto;
    }
    
    .g-use-anchor {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #fc0;
        border-radius: 50%;
    }
}

整個，會是這麼個效果：

需要簡單解讀一下這個結構：

這個很好理解，注意，此時此刻，.g-use-anchor 由於是絕對定位，是相對於它的父容器 .g-container 進行定位的。

而 Anchor Positioning 錨點定位，就允許我們，在上述情況下，改變 .g-use-anchor 的絕對定位的基準元素，允許它在絕對定位下，不再相對於父容器定位，而是相對於設定了 anchor-name 的錨點元素進行定位。

所以，下面，我們嘗試將 .g-anchor-element 變成一個錨點元素。

代碼如下：

.g-container {
    position: relative;
    width: 50vw;
    height: 50vh;
    border: 2px solid #666;
    display: flex;
    
    .g-anchor-element {
        width: 25vw;
        height: 25vh;
        border: 2px dashed #333;
        margin: auto;
        anchor-name: --target;
    }
    
    .g-use-anchor {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #fc0;
        border-radius: 50%;
        top: anchor(--target top);
        left: anchor(--target left);
    }
}

上面的代碼，有哪些改動呢？

我們給 .g-anchro-element 添加了一句 CSS 代碼，anchor-name: --target，其含義爲，將此元素設定爲一個錨點元素，它的名字是 --target。
在 .g-use-anchor 中，新增了兩句代碼

top: anchor(--target top)：這裏的意思是，使用 name 爲 --target 的錨點元素作爲定位基準，並且將元素的頂部（top）對齊到錨點元素的頂部（top）
left: anchor(--target left)：同理，使用 name 爲 --target 的錨點元素作爲定位基準，並且將元素的左邊（left）對齊到錨點元素的左邊（left）

如此一來，我們就得到了這麼一個效果：

也就是這麼一層關係：

完整的代碼，你可以戳這裏：CodePen Demo -- Anchor Positioning Demo

到這裏，聰明的你應該能夠深刻體會到，上面我們說的這一句話的含義了：

Anchor Positioning（錨點定位）用於增強元素的絕對定位的能力。Anchor Positioning（錨點定位）允許我們基於其它錨點元素的位置和尺寸去定位上下文，而不是傳統意義上的基於父元素去進行絕對定位。

Anchor Positioning 錨點定位實戰 -- 彈出框定位

可以說，很多之前無法使用 CSS 實現的功能，因爲 Anchor Positioning，迎來了新的轉機。

首先，我們來看這麼一個功能點，我們的頁面有很多需要 Hover 的時候彈出的 Popover 或者 Tooltip，像是這樣：

每次 Hover 的時候，彈出框的位置，其實都是需要實時通過 JavaScript 進行計算的。但是在有了 Anchor Positioning 後，我們可以把每一個被 Hover 需要彈出彈出框的元素，都設置成一個錨點元素，而我們的彈出框，只需要在 Hover 的時候，基於當前的錨點元素進行定位即可。

聽起來很複雜，我們來實現一遍試試：

<p class="g-container">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, porro, <span>facere</span>, et incidunt error aliquam fugit pariatur eos labore ipsum voluptate magni culpa reiciendis optio at accusantium non! Quis, laboriosam.
    Lorem ipsum dolor sit, <span>amet consectetur</span> adipisicing elit. Error commodi sequi perspiciatis ipsa veniam, aut, aliquam maiores quasi <span>adipisci tenetur </span>reiciendis dolor nihil aperiam labore, sunt qui ullam aspernatur <span>voluptate</span>.
</p>

在  元素下，被包裹了  的文字就是需要 Hover 的時候彈出內容的元素。


p {
    position: relative;
    
    span {
        color: deeppink;
    }
    
    &::before,
    &::after {
        position: absolute;
        transition: 0;
        opacity: 0;
    }
    
    &::before {
        content: "";
        top: calc(anchor(var(--target) top) + 10px);
        left: calc(anchor(var(--target) left) + 5px);
        border: 8px solid transparent;
        border-bottom: 8px solid #000;
    }
    &::after {
        content: "Alert Tips!";
        width: 80px;
        padding: 2px 4px;
        font-size: 14px;
        background: #fff;
        border: 2px solid #000;
        top: calc(anchor(var(--target) top) + 24px);
        left: anchor(var(--target) left);
        right: anchor(var(--target) right);
    }
}

p span:nth-child(1) {
    anchor-name: --anchor-1;
}
p span:nth-child(2) {
    anchor-name: --anchor-2;
}
p span:nth-child(3) {
    anchor-name: --anchor-3;
}
p span:nth-child(4) {
    anchor-name: --anchor-4;
}

p:has(span:nth-child(1):hover) {
    --target: --anchor-1;
}
p:has(span:nth-child(2):hover) {
    --target: --anchor-2;
}
p:has(span:nth-child(3):hover) {
    --target: --anchor-3;
}
p:has(span:nth-child(4):hover) {
    --target: --anchor-4;
}

p:has(span:hover)::before,
p:has(span:hover)::after{
    opacity: 1;
}

這裏的代碼，有點長，簡單解釋一下：

通過  元素的兩個僞元素 ::before 和 ::after，實現了彈出框的框體和一個小三角形
給每個  都設置了成了錨點，也就是這麼一段代碼：p span:nth-child(1) {anchor-name: --anchor-1;}
關鍵來了，利用了 :has 選擇器，實現了當哪個  被 hover，則設置 --target 變量爲當前元素的 anchor-name，也就是實現了錨點元素的動態變換
最終，只需要讓彈出框（也就是兩個僞元素），基於 --target 進行定位即可，而 --target 元素，就是我們每次 Hover 的文字元素，那麼彈框也就實現了動態定位

知識補充，:has 選擇器變相讓 CSS 擁有了父選擇器的能力，此選擇器用於選擇包含指定子元素的父元素，而本例中，利用了 :has 選擇器甚至能選擇包含指定僞類狀態的能力，實現了 --target 的動態切換。

這樣，我們就成功了實現了上述的功能：

當然，這裏還需要繼續補充一個基於 anchor() 方法的基礎知識，anchor() 方法的值也能與 calc 搭配使用，因此，需要理解如下的表達式：

top: calc(anchor(var(--target) top) + 10px)：將彈框元素的頂部（top）對齊到錨點元素的頂部（top），再加上 10px 的向上間距
left: calc(anchor(var(--target) left) + 5px)：將彈框元素的左邊（left）對齊到錨點元素的左邊（left），再加上 5px 的左間距

還有，如果頁面內有 100個  那下面這樣的代碼將會是噩夢性的重複工作：

p span:nth-child(1) {
    anchor-name: --anchor-1;
}
p span:nth-child(2) {
    anchor-name: --anchor-2;
}
p span:nth-child(3) {
    anchor-name: --anchor-3;
}
p span:nth-child(4) {
    anchor-name: --anchor-4;
}

p:has(span:nth-child(1):hover) {
    --target: --anchor-1;
}
p:has(span:nth-child(2):hover) {
    --target: --anchor-2;
}
p:has(span:nth-child(3):hover) {
    --target: --anchor-3;
}
p:has(span:nth-child(4):hover) {
    --target: --anchor-4;
}

因此，我們需要藉助 SCSS/SASS/LESS 等預處理簡化代碼，譬如這樣：

@for $i from 1 to 100 {
    p:has(span:nth-child(#{$i}):hover) {
        --target: --anchor-#{$i};
    }
    p span:nth-child(#{$i}) {
        anchor-name: --anchor-#{$i};
    }
}

合理利用預處理器的循環等功能，能有效提升我們的編碼效率。

OK，完整的代碼，你可以戳這裏：

CodePen Demo -- Anchor Positioning Demo

Anchor Positioning 錨點定位實戰 -- Tab 切換下劃線跟隨效果

OK，我們繼續，再來一個有意思的實戰演練。

基於 Anchor Positioning，能否實現這樣一個 TAB 切換時候的，下劃線跟隨效果呢？

此類效果，在之前，一定是需要 JavaScript 的介入纔可能實現的。在很久之前，我嘗試使用 CSS 實現過類似的效果：不可思議的CSS導航欄下劃線跟隨效果，效果上有很多瑕疵：

而有了 Anchor Positioning 後，我們將可以完美的實現 Tab 切換過程中的下劃線跟隨效果。

假設，我們的 TAB 的結構如下：

<ul>
    <li>下</li>
    <li>劃</li>
    <li>線</li>
    <li>跟</li>
    <li>隨</li>
    <li>動</li>
    <li>畫</li>
</ul>

其核心流程和上面的彈出框流程非常類似：

下劃線通過 <ul>元素的僞元素實現
給每個 <li> 都設置了成了錨點
利用了 :has 選擇器，實現當任意一個 <li> 被 hover，則設置 --target 錨點變量爲當前的 <li> 元素，也就是實現了錨點元素的動態變換
最終，只需要讓下劃線，基於動態的錨點進行定位即可，也就是我們每次 Hover 的 li 元素，那麼彈框也就實現下劃線動態定位
給下劃線的 left 設置過渡效果 transition，實現跟隨動畫效果

讓我們一起來看看代碼，看似複雜，代碼量也很少：

ul {
    position: relative;
    width: 700px;
    display: flex;
    
    li {
        flex-grow: 1;
    }
    
    &::before {
        position: absolute;
        content: "";
        height: 5px;
        background: transparent;
        bottom: 0;
        left: anchor(var(--target) left);
        right: anchor(var(--target) right);
        transition: .3s all;
        transform: scaleX(5);
    }
}

ul:hover::before {
    background: #000;
    transform: scaleX(1);
}

@for $i from 1 to 8 {
    ul:has(li:nth-child(#{$i}):hover) {
        --target: --anchor-#{$i};
    }
    li:nth-child(#{$i}) {
        anchor-name: --anchor-#{$i};
    }
}

需要好好理解一下這段代碼，其本質就在於，Hover 的時候，利用 :has 動態改變了 --target 錨點元素，讓僞元素實現的下劃線的寬度，設置爲錨點的寬度。

並且，這裏還加了一個 hover 過程中 transform: scaleX(5) 到 transform: scaleX(1) 的變化，屬於錦上添花，刪掉不影響最終效果。

當然，也利用了 SCSS 循環，減少了代碼量。最終的效果就如我們上面 Gif 圖演示般：

並且，可以做到適配 Flex 彈性佈局各種情況。

這樣，我們就實現了在之前，完全不敢想象能夠由 CSS 獨立實現的功能，完整的代碼，你可以戳這裏：CodePen Demo -- Anchor Positioning Demo

兼容性

OK，大家肯定非常關係如此強大的功能的兼容性。

目前，Anchor Positioning 還處於較早期的版本，甚至乎我在 Can i Use 上還查不到它的兼容性：

但是，目前我使用的 Chrome 115.0.5790.102 是能夠跑通上面的所有代碼。

並且，Anchor Positioning 還有非常多的語法以及有意思的實戰技巧，在本文是沒有放出來的。我會在 Anchor Positioning 兼容性更加明朗後，補充一篇更爲詳細的教學文章。只能說，未來可期。

最後

好了，本文到此結束，希望對你有幫助 😃

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

搶先體驗！超強的 Anchor Positioning 錨點定位

何爲 Anchor Positioning？

Anchor Positioning 錨點定位實戰 -- 彈出框定位

Anchor Positioning 錨點定位實戰 -- Tab 切換下劃線跟隨效果

兼容性

最後

C#開源的兩款功能強大的錄屏神器

認知提升的方法

螞蟻面試：Springcloud核心組件的底層原理，你知道多少？

【佈局進階】巧用 :has & drop-shadow 實現複雜佈局效果

現代 CSS 解決方案：accent-color 強調色

【動畫進階】神奇的 3D 卡片反光閃爍動效

現代 CSS 解決方案：文字顏色自動適配背景色！

帶圓角的虛線邊框？CSS 不在話下

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結