<position>

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

<position> CSS 資料型別表示一個二維座標，用於設定相對於元素框的位置。它用於 background-position、object-position、mask-position、offset-position、offset-anchor 和 transform-origin 屬性。

注意： <position> 值描述的最終位置不必在元素框內部。

語法

Grid showing placement of various values. 0 0 is the top left corner. The four values, right, right center, center left 100%, and top 50% left 100%, are all equivalent, being on the right edge in the middle vertically. The two values, top 75px left 100px and left 100px top 75px, are the same. Bottom left 25% is the same as top 100% left 25%.

<position> 資料型別由一個或兩個關鍵字以及可選的偏移量指定。

關鍵字值包括 center、top、right、bottom 和 left。每個關鍵字代表元素框的一條邊或兩條邊之間的中心線。根據上下文，center 代表左右邊緣之間的中心，或上下邊緣之間的中心。

如果指定了偏移量，它可以是相對的 <percentage> 值或絕對的 <length> 值。正值向右或向下偏移（視情況而定）。負值向相反方向偏移。

如果只指定了一個偏移量，它定義了 x 座標，另一個軸的值預設為 center。

css

/* 1-value syntax */
keyword                  /* Either the horizontal or vertical position; the other axis defaults to center */
value                    /* The position on the x-axis; the y-axis defaults to 50% */

/* 2-value syntax */
keyword keyword          /* A keyword for each direction (the order is irrelevant) */
keyword value            /* A keyword for horizontal position, value for vertical position */
value keyword            /* A value for horizontal position, keyword for vertical position */
value value              /* A value for each direction (horizontal then vertical) */

/* 4-value syntax */
keyword value keyword value /* Each value is an offset from the keyword that precedes it */

注意： background-position 屬性還接受三值語法。這在其他使用 <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>

示例

有效位置

center
left
center top

right 8.5%
bottom 12vmin right -6px

10% 20%
8rem 14px

無效位置

left right
bottom top
10px 15px 20px 15px

規範

規範
CSS 值和單位模組第 4 級 # position

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面由 MDN 貢獻者最後修改於 2025 年 10 月 10 日。

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