CSS 提供多種方法來定位頁面元素，包括文本，例如 position 屬性及其對應的 inset-* 屬性、translate、margin、anchor()（目前瀏覽器支持有限）等等。 offset 屬性是另一種選擇。
offset 屬性通常用於沿預定路徑為元素創建動畫。例如，以下示例中的正方形沿圓形路徑移動：
<div> <div></div> </div>
@property --p {
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
.square {
offset: top 50% right 50% circle(50%) var(--p);
transition: --p 1s linear;
/* 等同于：
offset-position: top 50% right 50%;
offset-path: circle(50%);
offset-distance: var(--p); */
/* 其他样式 */
}
.circle:hover .square{ --p: 100%; }</percentage>一個註冊的 CSS 自定義屬性 (--p) 用於設置和動畫化正方形元素的 offset-distance。動畫之所以可行，是因為可以使用 offset 將元素定位在給定路徑上的任意點。你可能不知道，offset 是一個簡寫屬性，由以下組成屬性構成：
offset-position: 路徑的起點offset-path: 元素可以沿其移動的形狀offset-distance: 元素沿路徑移動的距離offset-rotate: 元素相對於其錨點和偏移路徑的旋轉角度offset-anchor: 與路徑對齊的元素內的位置offset-path 屬性對於我們想要實現的目標至關重要。它接受形狀值——包括 SVG 形狀或 CSS 形狀函數——以及容器元素的參考框來創建路徑。
參考框？這些是根據 CSS 盒模型確定的元素尺寸，包括 content-box、padding-box、border-box，以及 SVG 上下文，例如 view-box、fill-box 和 stroke-box。 它們簡化了我們在容器元素邊緣沿路徑定位元素的方式。 以下是一個示例：下面所有的小正方形都放置在其容器元素 content-box 的默認左上角。相反，小圓圈分別位於 content-box、border-box 和 padding-box 的右上角（容器元素正方形周長的 25%）。
<div> <div></div> <div></div> <p>She sells sea shells by the seashore</p> </div> <div> <div></div> <div></div> <p>She sells sea shells by the seashore</p> </div> <div> <div></div> <div></div> <p>She sells sea shells by the seashore</p> </div>
.small {
/* 其他样式 */
position: absolute;
&.square {
offset: content-box;
border-radius: 4px;
}
&.circle { border-radius: 50%; }
}
.big {
/* 其他样式 */
contain: layout; /* (或 position: relative) */
&:nth-of-type(1) {
.circle { offset: content-box 25%; }
}
&:nth-of-type(2) {
border: 20px solid rgb(170 232 251);
.circle { offset: border-box 25%; }
}
&:nth-of-type(3) {
padding: 20px;
.circle { offset: padding-box 25%; }
}
}注意： 如果你不想在包含父元素內為元素分配空間，你可以分離元素的 offset-positioned 佈局上下文。這就是我在上面的示例中所採用的方法，以便內部的段落文本可以緊貼邊緣。因此，offset 定位的元素（小正方形和圓圈）使用 position: absolute 獲得它們自己的上下文，這將它們從正常的文檔流中移除。
這種相對於參考框進行定位的方法，使放置諸如通知點和裝飾性絲帶尖端之類的元素沿著某個 UI 模塊的外圍變得容易。它進一步簡化了沿包含塊邊緣放置文本的方式，因為由於 offset-rotate，offset 也可以沿路徑旋轉元素。一個簡單的示例顯示了放置在塊右邊緣的文章日期：
<div> <div></div> </div>
@property --p {
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
.square {
offset: top 50% right 50% circle(50%) var(--p);
transition: --p 1s linear;
/* 等同于：
offset-position: top 50% right 50%;
offset-path: circle(50%);
offset-distance: var(--p); */
/* 其他样式 */
}
.circle:hover .square{ --p: 100%; }</percentage>正如我們剛才看到的，將 offset 屬性與參考框路徑 和 容器單位一起使用效率更高——你可以輕鬆地根據包含元素的寬度或高度設置 offset-distance。我將在本文末尾的“進一步閱讀”部分中包含有關學習更多關於容器查詢和容器查詢單位的參考資料。
在最後一個示例中還使用了 offset-anchor 屬性。它提供元素位移和旋轉的錨點——例如，示例中的 90 度旋轉發生在元素的左下角。 offset-anchor 屬性還可以通過調整 inset-* 值來將元素從參考框向內或向外移動——例如，bottom -10px 參數將元素的底部邊緣從其包含元素的 padding-box 向外拉。這增強了放置的精度，如下所示。
<div> <div></div> <div></div> <p>She sells sea shells by the seashore</p> </div> <div> <div></div> <div></div> <p>She sells sea shells by the seashore</p> </div> <div> <div></div> <div></div> <p>She sells sea shells by the seashore</p> </div>
.small {
/* 其他样式 */
position: absolute;
&.square {
offset: content-box;
border-radius: 4px;
}
&.circle { border-radius: 50%; }
}
.big {
/* 其他样式 */
contain: layout; /* (或 position: relative) */
&:nth-of-type(1) {
.circle { offset: content-box 25%; }
}
&:nth-of-type(2) {
border: 20px solid rgb(170 232 251);
.circle { offset: border-box 25%; }
}
&:nth-of-type(3) {
padding: 20px;
.circle { offset: padding-box 25%; }
}
}如文章開頭所示，offset 定位是可動畫的，這允許動態設計效果，例如：
<h1>The Irreplaceable Value of Human Decision-Making in the Age of AI</h1> <div>Published on 11<sup>th</sup> Dec</div> <cite>An excerpt from the HBR article</cite>
article {
container-type: inline-size;
/* 其他样式 */
}
.date {
offset: padding-box 100cqw 90deg / left 0 bottom -10px;
/*
等同于：
offset-path: padding-box;
offset-distance: 100cqw; (容器元素宽度的 100%)
offset-rotate: 90deg;
offset-anchor: left 0 bottom -10px;
*/
}無論是用於圖形設計（例如沿邊框的文本）、文本註釋，還是動態文本（例如錯誤消息），CSS offset 都是一個易於使用的選項。我們可以沿包含父元素的參考框定位元素，旋轉它們，甚至根據需要添加動畫。
offset-path 屬性: CSS-Tricks, MDNoffset-anchor 屬性: CSS-Tricks, MDN@property at-rule: CSS-Tricks, web.dev以上是用CSS偏移圍繞元素定位文本的詳細內容。更多資訊請關注PHP中文網其他相關文章！
