position-area

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

position-area CSS 屬性讓錨點定位的元素能夠相對於其關聯錨點元素的邊緣進行定位，方法是將其放置在一個隱式的 3x3 網格的一個或多個單元格中，其中錨點元素是中心單元格。

position-area 為透過插入屬性和 anchor() 函式將元素繫結並相對於其錨點定位提供了一種方便的替代方案。這種基於網格的概念解決了將定位元素的包含塊的邊緣相對於其預設錨點元素的邊緣進行定位的常見用例。

如果一個元素沒有預設錨點元素，或者不是絕對定位的元素，此屬性將不起作用。

備註： 此屬性最初在 Chromium 瀏覽器中被命名並支援為 inset-area，其屬性值相同。為了向後相容，這兩個屬性名稱將在短期內均被支援。

語法

css

/* Default value */
position-area: none;

/* Two <position-area> keywords defining a single specific tile */
position-area: top left;
position-area: start end;
position-area: block-start center;
position-area: inline-start block-end;
position-area: x-start y-end;
position-area: center y-self-end;

/* Two <position-area> keywords spanning two tiles */
position-area: top span-left;
position-area: center span-start;
position-area: inline-start span-block-end;
position-area: y-start span-x-end;

/* Two <position-area> keywords spanning three tiles */
position-area: top span-all;
position-area: block-end span-all;
position-area: x-self-start span-all;

/* One <position-area> keyword with an implicit second <position-area> keyword  */
position-area: top; /* equiv: top span-all */
position-area: inline-start; /* equiv: inline-start span-all */
position-area: center; /* equiv: center center */
position-area: span-all; /* equiv: center center */
position-area: end; /* equiv: end end */

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

值

屬性值為兩個 <position-area> 關鍵字，或者關鍵字 none。如果只提供了一個 <position-area> 關鍵字，則第二個關鍵字是隱含的。

<position-area>: 指定所選定位元素應放置在位置區域網格的哪個區域上。
none: 不設定位置區域。

描述

position-area 屬性為相對於錨點定位元素提供了 anchor() 函式的替代方案。position-area 基於一個 3x3 的單元格網格的概念，稱為位置區域網格，其中錨點元素是中心單元格。

The position-area grid, as described below

網格瓷磚被分為行和列。

三行由物理值 top、center 和 bottom 表示。它們也有邏輯等價值，如 block-start、center 和 block-end，以及座標等價值——y-start、center 和 y-end。
三列由物理值 left、center 和 right 表示。它們也有邏輯等價值，如 inline-start、center 和 inline-end，以及座標等價值——x-start、center 和 x-end。

中心單元格的尺寸由錨點元素的包含塊定義，而網格外邊緣的尺寸由定位元素的包含塊定義。

<position-area> 值由一個或兩個關鍵字組成，這些關鍵字定義了定位元素應放置在網格的哪個區域內。確切地說，定位元素的包含塊被設定為該網格區域。

例如

你可以指定一個行值和一個列值，將定位元素放置在一個特定的網格單元格中——例如，top left（邏輯等價值為 start start）或 bottom center（邏輯等價值為 end center）將分別將定位元素放置在右上角或底部中心的單元格中。
你可以指定一個行值或列值加上一個 span-* 值來跨越兩個或三個單元格。第一個值指定了放置定位元素的行或列，將其初始放置在中心，另一個值指定了該行或列中要跨越的其他單元格。例如：
- top span-left 會使定位元素被放置在頂行的中心，並跨越該行的中心和左側單元格。
- block-end span-inline-end 會使定位元素被放置在塊結束行的中心，並跨越該行的中心和行內結束單元格。
- bottom span-all 和 y-end span-all 會使定位元素被放置在底行的中心，並跨越三個單元格，這種情況下是底行的左側、中心和右側單元格。

有關錨點特性、用法和 position-area 屬性的詳細資訊，請參閱 CSS 錨點定位模組的首頁和使用 CSS 錨點定位指南，特別是關於設定 position-area 的部分。

調整後的預設行為

當在定位元素上設定 <position-area> 值時，它的一些屬性的預設行為將被調整，以提供良好的預設對齊方式。

自對齊屬性的 `normal` 值

自對齊屬性的 normal 值，包括 align-items、align-self、justify-items 和 justify-self，其行為類似於 start、end 或 anchor-center。自對齊屬性具體預設採用哪個值，取決於元素的定位：

如果 position-area 值指定了某個軸上的中心區域，則該軸上的預設對齊方式為 anchor-center。
否則，行為將與 position-area 屬性指定的區域相反。例如，如果 position-area 值指定了其軸的起始區域，則該軸上的預設對齊方式為 end。

例如，如果 writing-mode 設定為 horizontal-tb，position-area: top span-x-start 會使定位元素被放置在頂行的中心，並跨越該行的中心和起始單元格。在這種情況下，自對齊屬性將預設為 align-self: end 和 justify-self: anchor-center。

插入屬性和值

當使用 position-area 屬性定位錨點定位的元素時，任何設定的插入屬性（例如 top 或 inset-inline-end）都指定了相對於位置區域的偏移量。其他一些屬性值，如 max-block-size: 100%，也將相對於位置區域。任何被設定或預設為 auto 的插入屬性的行為將如同其值被設定為 0 一樣。

關於定位元素寬度的旁註

如果定位元素沒有設定特定尺寸，其尺寸將預設為其固有尺寸，但它也會受到位置區域網格尺寸的影響。

如果定位元素被放置在單個頂部中心、底部中心或中心-中心單元格中，其塊級尺寸將與錨點的包含塊尺寸相同，分別向上、向下或雙向增長。定位元素將與指定的網格單元格對齊，但採用與錨點元素相同的寬度。然而，它不會允許其內容溢位——其最小 width 將是其 min-content（由其最長單詞的寬度定義）。

如果定位元素被放置在任何其他單個網格單元格中（例如使用 position-area: top left）或被設定為跨越兩個或更多網格單元格（例如使用 position-area: bottom span-all），它將與指定的網格區域對齊，但其行為就像設定了 width 為 max-content 一樣。它的大小是根據其包含塊的大小來確定的，這個大小是當它被設定為 position: fixed 時施加給它的大小。它會拉伸到與文字內容一樣寬，儘管它也可能受到 <body> 邊緣的限制。

使用 `position-area` 定位彈出框

當使用 position-area 定位彈出框時，請注意彈出框的預設樣式可能會與你試圖實現的位置衝突。常見的問題是 margin 和 inset 的預設樣式，因此建議重置它們：

css

.my-popover {
  margin: 0;
  inset: auto;
}

CSS 工作組正在研究如何避免這種變通方法。

正式定義

初始值	`none`
應用於	具有預設錨點元素的定位元素
繼承性	否
計算值	同指定值
動畫型別	離散

正式語法

position-area = 
  none             |
  <position-area>  

<position-area> = 
  [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | self-x-start | self-x-end | span-self-x-start | span-self-x-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | self-y-start | self-y-end | span-self-y-start | span-self-y-end | span-all ]  |
  [ block-start | center | block-end | span-block-start | span-block-end | span-all ] || [ inline-start | center | inline-end | span-inline-start | span-inline-end | span-all ]  |
  [ self-block-start | center | self-block-end | span-self-block-start | span-self-block-end | span-all ] || [ self-inline-start | center | self-inline-end | span-self-inline-start | span-self-inline-end | span-all ]  |
  [ start | center | end | span-start | span-end | span-all ]{1,2}  |
  [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2}

示例

基本示例

在此示例中，一個定位元素使用 position-area 屬性被繫結並相對於其關聯的錨點進行定位。

HTML

HTML 包括一個 <div> 和一個 <p>。<p> 將透過 CSS 相對於 <div> 進行定位。我們還包括一個將可見的樣式塊。所有元素都透過 contenteditable 屬性設定為可直接編輯。

html

<div class="anchor" contenteditable="true">⚓︎</div>

<p class="positionedElement" contenteditable="true">This can be edited.</p>

<style contenteditable="true">.positionedElement {
    position-area: top center;
  }
</style>

CSS

我們使用 anchor-name 屬性將 <div> 轉換為錨點元素。然後，我們透過將其 position-anchor 值設定為相同的錨點名稱，將絕對定位的 <p> 與之關聯。

我們將初始的 position-area 值設定為 top center。此值設定在 p 選擇器上，因此該值的特異性低於新增到 <style> 塊的 .positionedElement 類選擇器的任何值。因此，你可以透過在樣式塊內設定一個 position-area 值來覆蓋初始的 position-area 值。

css

.anchor {
  anchor-name: --infobox;
  background: palegoldenrod;
  font-size: 3em;
  width: fit-content;
  border: 1px solid goldenrod;
  margin: 100px auto;
}

p {
  position: absolute;
  position-anchor: --infobox;
  position-area: top center;
  margin: 0;
  background-color: darkkhaki;
  border: 1px solid darkolivegreen;
}

style {
  display: block;
  white-space: pre;
  font-family: monospace;
  background-color: #ededed;
  -webkit-user-modify: read-write-plaintext-only;
  line-height: 1.5;
  padding: 10px;
}

結果

嘗試更改錨點定位元素中的文字量，看看它是如何增長的。另外，嘗試將 position-area 屬性的值更改為其他值，例如 center。

`position-area` 值比較

此演示建立了一個錨點，並將一個定位元素繫結到它上面。它還提供了一個下拉選單，允許你選擇各種 position-area 值應用到定位元素上，以檢視其效果。其中一個選項會使一個文字欄位出現，使你能夠輸入自定義值。最後，提供了一個複選框來開啟和關閉 writing-mode: vertical-lr，讓你觀察 position-area 值的效果在不同書寫模式下的差異。

HTML

在 HTML 中，我們指定了兩個 <div> 元素，一個類名為 anchor，另一個類名為 infobox。它們分別用作錨點元素和我們將與之關聯的定位元素。我們在兩者上都包含了 contenteditable 屬性，使它們可以直接編輯。

我們還包含了兩個表單，其中包含用於設定不同 position-area 值的 <select> 和 <input type="text"> 元素，以及用於切換垂直 writing-mode 的 <input type="checkbox"> 元素。為了簡潔起見，這些程式碼以及 JavaScript 已被隱藏。

html

<div class="anchor" contenteditable>⚓︎</div>

<div class="infobox">
  <p contenteditable>You can edit this text.</p>
</div>

<form id="position-area-form">
  <div>
    <label for="position-area-select">Choose a position-area:</label>
    <select id="position-area-select" name="position-area-select">
      <optgroup label="Enter custom value">
        <option>Custom</option>
      </optgroup>
      <optgroup label="Physical, single tile">
        <option selected>top left</option>
        <option>bottom right</option>
      </optgroup>
      <optgroup label="Physical, span two">
        <option>bottom span-right</option>
        <option>left span-top</option>
      </optgroup>
      <optgroup label="Physical, span all">
        <option>top</option>
        <option>left</option>
      </optgroup>
      <optgroup label="Logical, single tile">
        <option>start center</option>
        <option>inline-start block-end</option>
      </optgroup>
      <optgroup label="Logical, span two">
        <option>start span-end</option>
        <option>center span-start</option>
        <option>inline-start span-block-end</option>
        <option>span-block-start center</option>
      </optgroup>
      <optgroup label="Logical, span all">
        <option>start span-all</option>
        <option>block-end</option>
      </optgroup>
      <optgroup label="Coordinates, single tile">
        <option>x-start center</option>
        <option>x-end y-end</option>
      </optgroup>
      <optgroup label="Coordinates, span two">
        <option>center span-y-start</option>
        <option>y-start span-x-end</option>
      </optgroup>
      <optgroup label="Coordinates, span all">
        <option>x-start span-all</option>
        <option>y-end</option>
      </optgroup>
    </select>
  </div>
  <div id="position-area-custom-container">
    <label for="position-area-custom">Enter a custom position-area:</label
    ><br />
    <input type="text" id="position-area-custom" name="position-area-custom" />
  </div>
</form>

<form id="writing-mode-form">
  <label for="writing-mode-checkbox">writing-mode: vertical-lr</label><br />
  <input
    type="checkbox"
    id="writing-mode-checkbox"
    name="writing-mode-checkbox" />
</form>

CSS

在 CSS 中，我們首先透過 anchor-name 屬性在其上設定一個錨點名稱，將 anchor <div> 宣告為錨點元素。

透過將錨點名稱設定為定位元素的 position-anchor 屬性的值，將定位元素與錨點元素關聯起來。我們還使用 position-area: top left 給了它一個初始位置；當從 <select> 選單中選擇新值時，這將（被）覆蓋。最後，我們將其 opacity 設定為 0.8，這樣當定位元素被賦予一個將其置於錨點之上的 position-area 值時，你仍然可以看到元素之間的相對位置。

.anchor {
  font-size: 1.8rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  min-width: 50px;
  min-height: 50px;
  line-height: 50px;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

html {
  height: 100%;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

form {
  background: white;
  border: 1px solid black;
  padding: 5px;
  position: fixed;
}

#position-area-form {
  top: 0;
  right: 2px;
}

#position-area-form div:last-child {
  margin-top: 10px;
}

#position-area-form div :last-child {
  margin-top: 5px;
}

#writing-mode-form {
  bottom: 0;
  left: 2px;
  writing-mode: horizontal-tb;
}

#position-area-custom-container {
  display: none;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 5px 2px;
  border-radius: 5px;
  font-size: 1rem;
  box-sizing: border-box;
}

css

.anchor {
  anchor-name: --my-anchor;
}

.infobox {
  position-anchor: --my-anchor;
  position: fixed;
  opacity: 0.8;
  position-area: top left;
}

const anchorContainer = document.querySelector("body");
const infobox = document.querySelector(".infobox");

const positionAreaForm = document.querySelector("#position-area-form");
const selectElem = document.querySelector("select");
const inputElemContainer = document.querySelector(
  "#position-area-custom-container",
);
const inputElem = document.querySelector("#position-area-custom");
const checkboxElem = document.querySelector("#writing-mode-checkbox");

// Stop form from submitting when enter is pressed on it
positionAreaForm.addEventListener("submit", (e) => {
  e.preventDefault();
});

// Update positioned element position-area to value selected in drop-down
selectElem.addEventListener("change", () => {
  const area = selectElem.value;

  if (area === "Custom") {
    // Show the custom value input field
    inputElemContainer.style.display = "block";
  } else {
    // Hide the custom value input field
    inputElemContainer.style.display = "none";
    // Set the position-area to the value chosen in the select box
    infobox.style.positionArea = area;
  }
});

// Update positioned element position-area to entered custom value
inputElem.addEventListener("change", () => {
  const customArea = inputElem.value;

  // Set the position-area to the value in the input box
  infobox.style.positionArea = customArea;
});

// Change writing-mode to match checkbox setting
checkboxElem.addEventListener("change", () => {
  if (checkboxElem.checked) {
    anchorContainer.style.writingMode = "vertical-lr";
  } else {
    anchorContainer.style.writingMode = "horizontal-tb";
  }
});

結果

結果如下：

嘗試從 <select> 選單中選擇新的 position-area 值，看看它們對資訊框位置的影響。選擇“Custom”值，並嘗試在文字輸入框中輸入一些自定義的 position-area 值，看看它們的效果。向錨點和錨點定位元素新增文字，看看錨點定位元素如何根據 position-area 值增長。最後，勾選複選框，然後試驗不同的 position-area 值，看看哪些值在不同書寫模式下得到相同的結果，哪些得到不同的結果。