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或默认为auto的内边距属性的行为都将如同其值为0。

关于定位元素宽度的说明

如果定位元素没有设置特定的尺寸，则其尺寸将默认为其内在尺寸，但它也会受到定位区域网格尺寸的影响。

如果定位元素放置在一个顶中、底中或中中单元格中，则其块尺寸将与锚点的包含块尺寸相同，分别向上、向下或双向增长。定位元素将与指定的网格方块对齐，但采用与锚元素相同的宽度。但是，它不允许其内容溢出——其最小width将为其min-content（由其最长单词的宽度定义）。

如果定位元素放置在任何其他单个网格方块中（例如使用position-area: top left）或设置为跨越两个或多个网格方块（例如使用position-area: bottom span-all），它将与指定的网格区域对齐，但行为就像在其上设置了width为max-content。它根据其包含块的大小进行调整大小，这是在将其设置为position: fixed时强加给它的尺寸。它将扩展到与文本内容一样宽，尽管它也可能受<body>边缘的限制。

正式定义

数据库中未找到值！

正式语法

position-area = 
  none             |
  <position-area>  

<position-area> = 
  [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | x-self-start | x-self-end | span-x-self-start | span-x-self-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | y-self-start | y-self-end | span-y-self-start | span-y-self-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: CHANGEME;
  }
</style>

CSS

我们将<div>转换为具有anchor-name属性的锚元素。然后，我们通过将其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属性的无效“CHANGEME”值更改为有效值。

`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 #ddd;
  padding: 5px 2px;
  border-radius: 5px;
  font-size: 1rem;
  box-sizing: border-box;
}

css

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

.infobox {
  position-anchor: --myAnchor;
  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值以查看它们对信息框位置的影响。选择“自定义”值并尝试将一些自定义position-area值输入文本输入框以查看其效果。向锚点和锚点定位元素添加文本以查看锚点定位元素如何根据position-area值增长。最后，选中复选框，然后尝试不同的position-area值以查看哪些值在不同的书写模式下产生相同的结果，以及哪些值产生不同的结果。

规范

规范
CSS 锚点定位 # position-area

浏览器兼容性

BCD 表格仅在浏览器中加载

自对齐属性normal值

内边距属性和值

HTML

CSS

结果

HTML

CSS

结果

自对齐属性`normal`值