本文，將向大家介紹 CSS 規(guī)范中，最新的 Anchor Positioning，翻譯為錨點定位。

Anchor Position 的出現(xiàn)，極大的豐富了 CSS 的能力，雖然語法稍顯復(fù)雜，但是有了它，能夠?qū)崿F(xiàn)非常多之前實現(xiàn)起來非常困難，或者壓根無法使用純 CSS 實現(xiàn)的功能。

Anchor Position 當前仍屬于實驗室功能，新版本 Chrome 開啟該功能：

• 瀏覽器 URL 輸入框輸入： chrome://flags/
• 找到 Experimental Web Platform features 選項，開啟該功能

何為 Anchor Positioning？

那么，什么是 Anchor Positioning 呢？

Anchor Positioning 由規(guī)范 CSS Anchor Positioning 提出定義。

規(guī)范是這么描述的：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（錨點定位）允許我們基于其它錨點元素的位置和尺寸去定位上下文，而不是傳統(tǒng)意義上的基于父元素去進行絕對定位。

整個 Anchor Positioning 到底是干啥的？其重點總結(jié)如下：

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

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

假設(shè)，我們有如下代碼結(jié)構(gòu)：

<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%;
    }
}

整個，會是這么個效果：

需要簡單解讀一下這個結(jié)構(gòu)：

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

而 Anchor Positioning 錨點定位，就允許我們，在上述情況下，改變 .g-use-anchor 的絕對定位的基準元素，允許它在絕對定位下，不再相對于父容器定位，而是相對于設(shè)定了 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-anchor-element 添加了一句 CSS 代碼，anchor-name: --target，其含義為，將此元素設(shè)定為一個錨點元素，它的名字是 --target。
• 在 .g-use-anchor 中，新增了兩句代碼

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

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

也就是這么一層關(guān)系：

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

到這里，聰明的你應(yīng)該能夠深刻體會到，上面我們說的這一句話的含義了：

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

Anchor Positioning 錨點定位實戰(zhàn) -- 彈出框定位

可以說，很多之前無法使用 CSS 實現(xiàn)的功能，因為 Anchor Positioning，迎來了新的轉(zhuǎn)機。

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

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

聽起來很復(fù)雜，我們來實現(xiàn)一遍試試：

<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>

在 <p> 元素下，被包裹了 <span> 的文字就是需要 Hover 的時候彈出內(nèi)容的元素。

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;
}

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

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

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

這樣，我們就成功了實現(xiàn)了上述的功能：

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

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

還有，如果頁面內(nèi)有 100個 <span> 那下面這樣的代碼將會是噩夢性的重復(fù)工作：

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 等預(yù)處理簡化代碼，譬如這樣：

@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};
    }
}

合理利用預(yù)處理器的循環(huán)等功能，能有效提升我們的編碼效率。

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

CodePen Demo -- Anchor Positioning Demo

Anchor Positioning 錨點定位實戰(zhàn) -- Tab 切換下劃線跟隨效果

OK，我們繼續(xù)，再來一個有意思的實戰(zhàn)演練。

基于 Anchor Positioning，能否實現(xiàn)這樣一個 TAB 切換時候的，下劃線跟隨效果呢？

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

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

假設(shè)，我們的 TAB 的結(jié)構(gòu)如下：

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

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

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

讓我們一起來看看代碼，看似復(fù)雜，代碼量也很少：

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};
    }
}

需要好好理解一下這段代碼，其本質(zhì)就在于，Hover 的時候，利用 :has 動態(tài)改變了 --target 錨點元素，讓偽元素實現(xiàn)的下劃線的寬度，設(shè)置為錨點的寬度。

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

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

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

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

兼容性

OK，大家肯定非常關(guān)系如此強大的功能的兼容性。

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

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

Anchor Position 當前仍屬于實驗室功能，新版本 Chrome 開啟該功能：

• 瀏覽器 URL 輸入框輸入： chrome://flags/
• 找到 Experimental Web Platform features 選項，開啟該功能

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

到此這篇關(guān)于Anchor Positioning 錨點定位功能搶先體驗的文章就介紹到這了,更多相關(guān)Anchor Positioning 錨點 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論