offset-position

Baseline 2024

新推出

自 ⁨2024 年 1 月⁩起，此特性已在最新的裝置和瀏覽器版本中可用。此特性可能無法在較舊的裝置或瀏覽器上使用。

offset-position CSS 屬性定義了元素沿路徑的初始位置。此屬性通常與 offset-path 屬性結合使用，以建立運動效果。如果 offset-path 函式（例如 path()）未指定其自己的起始位置，則 offset-position 的值將決定元素在沿偏移路徑移動時的初始放置位置。

offset-position 屬性是基於 offset 組成屬性的運動系統的一部分，其中包括 offset-anchor、offset-distance 和 offset-path。這些屬性協同工作，以沿路徑建立各種運動效果。

語法

css

/* Keyword values */
offset-position: normal;
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;

/* <percentage> values */
offset-position: 25% 75%;

/* <length> values */
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;

/* Edge offsets values */
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;

/* Global values */
offset-position: inherit;
offset-position: initial;
offset-position: revert;
offset-position: revert-layer;
offset-position: unset;

值

normal: 表示元素沒有偏移起始位置，並將元素放置在包含塊的 50% 50% 處。這是預設值。
auto: 表示偏移起始位置是元素框的左上角。
<position>: 將位置指定為 x/y 座標，以相對於其框邊緣放置元素。位置可以使用一到四個值定義。如果使用兩個非關鍵字值，則第一個值表示水平位置，第二個值表示垂直位置。如果只指定一個值，則假定第二個值為 center。如果使用三個或四個值，則 <length-percentage> 值是前導關鍵字值的偏移量。有關這些值型別的更多解釋，請參閱 background-position。

正式定義

初始值	`normal`
應用於	可變換元素
繼承性	否
百分比	指包含塊的大小
計算值	對於 `<length>` 則是絕對值，否則為百分比
動畫型別	一個 position

正式語法

offset-position = 
  normal      |
  auto        |
  <position>  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<length-percentage> = 
  <length>      |
  <percentage>

示例

設定 offset-path 的初始 offset-position

在此示例中，offset-path 屬性用於定義 cyan 元素應沿其移動的路徑。path() CSS 函式的值是描述彎曲路徑的 SVG 資料路徑。元素在 move 動畫期間沿此彎曲路徑移動。

HTML

html

<div id="wrap">
  <div id="motion-demo"></div>
</div>

CSS

#wrap {
  width: 260px;
  height: 160px;
  border: 1px dashed black;
}

css

#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  offset-position: left top;
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0%,
  20% {
    offset-distance: 0%;
  }
  80%,
  100% {
    offset-distance: 100%;
  }
}

結果

比較各種偏移起始位置

此示例直觀地比較了當使用 ray() 為 offset-path 屬性指定值時，元素的各種初始偏移起始位置。元素框內的數字表示應用了 CSS 的元素以及元素的錨點。

<div class="wrap">
  <div class="box">0</div>
  <div class="box box0">0</div>
  <pre>
    offset-position: normal;
    /* No offset-path specified */
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box1">1</div>
  <pre>
    offset-position: normal;
    offset-path: ray(0deg);
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box2">2</div>
  <pre>
    offset-position: auto;
    offset-path: ray(0deg);
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box3">3</div>
  <pre>
    offset-position: left top;
    offset-path: ray(0deg);
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box4">4</div>
  <pre>
    offset-position: 30% 70%;
    offset-path: ray(120deg);
  </pre>
</div>

.wrap {
  position: relative;
  width: 80vw;
  height: 120px;
  border: 1px solid black;
  margin: 0 2em 4em 5em;
  text-align: center;
}

pre {
  font-size: 1em;
  text-align: right;
  padding-right: 10px;
  line-height: 1em;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}

.box + .box {
  opacity: 1;
}

css

.box {
  background-color: green;
  border-top: 6px dashed white;
  background-clip: border-box;
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 20%;
  color: white;
}

.box0 {
  offset-position: normal;
}

.box1 {
  offset-position: normal;
  offset-path: ray(0deg);
}

.box2 {
  offset-position: auto;
  offset-path: ray(0deg);
}

.box3 {
  offset-position: left top;
  offset-path: ray(0deg);
}

.box4 {
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

結果

在 box0 中，缺少 offset-path 屬性意味著 normal 或 auto 的 offset-position 無效。當 offset-position 為 normal 時，射線從包含塊的中心（即 50% 50%）開始。這是偏移路徑的預設起始位置，當未指定 offset-position 時使用。請注意偏移起始位置 auto 和 left top 之間的區別。值 auto 將元素的錨點與其自身的左上角對齊，而值 left top 將元素的錨點與包含塊的左上角對齊。

規範

規範
Motion Path Module Level 1 # offset-position-property

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者最後修改於 2025 年 7 月 14 日。

在 GitHub 上檢視此頁面 • 報告此內容的問題