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 值，看看哪些值在不同书写模式下得到相同的结果，哪些得到不同的结果。