position-anchor

有限可用性

此功能不是基线，因为它在一些最广泛使用的浏览器中无法正常工作。

实验性：这是一个实验性技术
在生产环境中使用之前，请仔细查看浏览器兼容性表。

position-anchor CSS 属性指定定位元素关联的锚元素（即通过 anchor-name 属性设置了锚名称的元素）的锚名称。

语法

css

/* Single values */
position-anchor: auto;
position-anchor: --anchorName;

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

值

auto: 将定位元素与其隐式锚元素关联，如果它存在——例如，由非标准 HTML anchor 属性设置。
<dashed-ident>: 要将定位元素关联的锚元素的名称，如锚元素的 anchor-name 属性中列出。这被称为默认锚指定符。

描述

此属性仅与“定位”元素相关——设置了 absolute 或 fixed 的 position 的元素和伪元素。

要将元素相对于锚元素定位，定位元素需要三个要素：关联、位置和位置。position-anchor 和 anchor-name 属性提供了关联。

锚元素接受通过 anchor-name 属性设置的一个或多个 <dashed-ident> 锚名称。当这些名称之一随后被设置为定位元素 position-anchor 属性的值时，这两个元素就会关联。

如果有多个锚元素具有 position-anchor 属性中列出的锚名称，则定位元素将与源顺序中最后一个具有该锚名称的锚元素关联。

要将定位元素绑定到其锚元素，必须使用锚定位功能（例如 anchor() 函数（设置为内边距属性的值））或 position-area 属性将定位元素相对于锚元素放置。

如果关联的锚元素被隐藏，例如通过 display: none 或 visibility: hidden，或者如果它由于在其上设置了 content-visibility: hidden 导致是另一个元素的跳过内容的一部分，则锚定位元素将不会显示。

position-anchor 属性在所有定位元素上都受支持，包括伪元素，如 ::before 和 ::after。伪元素隐式地与伪元素的源元素相同的元素关联，除非另有说明。

有关锚功能和用法的更多信息，请参阅 CSS 锚定位模块着陆页和使用 CSS 锚定位指南。

正式定义

初始值	`implicit`
应用于	绝对定位元素
继承	否
计算值	如指定
动画类型	离散

正式语法

position-anchor = 
  auto              |
  <anchor-element>  

<anchor-element> = 
  <dashed-ident>

示例

有关基本用法和更多 position-anchor 示例，请参阅 anchor-name 文档。

使用滑块滑块作为锚

在此示例中，一个 <output> 相对于一个作为范围滑块滑块的锚进行定位。

HTML

我们包含一个 <input type="range"> 元素和一个 <output> 元素来显示范围的值。<output> 元素中显示的值通过 JavaScript 在滑块值更改时更新。

html

<label for="slider">Change the value:</label>
<input type="range" min="0" max="100" value="25" id="slider" />
<output>25</output>

CSS

我们将拇指（由 ::-webkit-slider-thumb 伪元素表示）设置为锚点名称 --thumb。然后，我们将该名称设置为 <output> 元素的 position-anchor 属性的值，并赋予它一个 position 值 fixed。这些步骤将 <output> 与拇指关联起来。

最后，我们使用 left 和 top 属性，并使用 anchor() 值，将 <output> 相对于拇指定位。

body {
  display: grid;
  place-items: center;
  height: 100vh;
  font-size: 1.4rem;
  font-family: sans-serif;
}
input {
  width: 33vw;
}
output {
  background: cyan;
  border: 2px solid darkblue;
  padding: 3px 6px;
  border-radius: 10px;
  font-size: 1.2rem;
}

css

input::-webkit-slider-thumb {
  anchor-name: --thumb;
}

output {
  position-anchor: --thumb;
  position: absolute;
  left: anchor(right);
  bottom: anchor(top);
}

JavaScript

我们包含一个事件监听器，它在 <input> 的值发生变化时更新 <output> 元素的内容。

const input = document.querySelector("input");
const output = document.querySelector("output");

input.addEventListener("input", (event) => {
  output.innerText = `${input.value}`;
});

结果

输出锚定在拇指上。更改值。如果您的浏览器支持锚点定位，则无论拇指在滑块上的什么位置，值都将在拇指的上面和右边。

多个定位元素和锚点

在本例中，您可以移动多个定位元素，并将它们与不同的锚点关联。本例演示了如何将一个锚点与多个定位元素关联，但一个锚点定位的元素一次只能与一个锚点关联，即由 anchor-position 属性定义的锚点。

HTML

我们有四个锚点和两个定位元素，它们使用不同的 id 值区分。定位元素包含 <select> 框，允许您选择要与它们关联的锚点。

html

<div id="anchor-container">
  <div class="anchor" id="anchor1">⚓︎</div>
  <div class="anchor" id="anchor2">⚓︎</div>
  <div class="anchor" id="anchor3">⚓︎</div>
  <div class="anchor" id="anchor4">⚓︎</div>
</div>

<div class="infobox" id="infobox1">
  <form>
    <label for="anchor1-anchor-select">Place infobox on:</label>
    <select id="anchor1-anchor-select">
      <option value="1">Anchor 1</option>
      <option value="2">Anchor 2</option>
      <option value="3">Anchor 3</option>
      <option value="4">Anchor 4</option>
    </select>
  </form>
</div>

<div class="infobox" id="infobox2">
  <form>
    <label for="anchor2-anchor-select">Place infobox on:</label>
    <select id="anchor2-anchor-select">
      <option value="1">Anchor 1</option>
      <option value="2">Anchor 2</option>
      <option value="3">Anchor 3</option>
      <option value="4">Anchor 4</option>
    </select>
  </form>
</div>

CSS

我们使用 anchor-name 属性将第一个 anchor <div> 声明为锚点，该属性提供两个用逗号分隔的锚点名称，每个定位元素一个。这是演示的初始状态 - 两个定位元素都将绑定到第一个锚点。

body {
  height: 100vh;
}

#anchor-container {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr 1fr;
  justify-items: center;
  align-items: center;
}

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

css

#anchor1 {
  anchor-name: --myAnchor1, --myAnchor2;
}

每个定位元素都使用 position-anchor 属性，其值为两个锚点名称之一。然后，使用内边距、对齐和边距属性的组合，为定位元素提供相对于锚点的定位信息。

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
  width: 120px;
}

css

#infobox1 {
  position-anchor: --myAnchor1;
  position: fixed;
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}

#infobox2 {
  position-anchor: --myAnchor2;
  position: fixed;
  bottom: anchor(top);
  justify-self: anchor-center;
  margin-bottom: 15px;
}

JavaScript

我们根据定位元素的 <select> 菜单中选择的不同锚点，动态更改 anchor-name 值设置的锚点元素。这里的主要功能是 change 事件处理程序 updateAnchorNames()。如果在两个 <select> 菜单中选择的锚点相同，它会在一个锚点上设置两个锚点名称。否则，它会在两个单独的锚点上设置一个锚点名称。

// Get references to the two select menus
const select1 = document.querySelector("#anchor1-anchor-select");
const select2 = document.querySelector("#anchor2-anchor-select");
// Store references to all the anchors in a NodeList (array-like)
const anchors = document.querySelectorAll("#anchor-container > div");

// Set the same change event handler on both select menus
select1.addEventListener("change", updateAnchorNames);
select2.addEventListener("change", updateAnchorNames);

function updateAnchorNames() {
  // Remove all anchor names from all anchors
  for (const anchor of anchors) {
    anchor.style.anchorName = "none";
  }

  // convert the select menu values to numbers, and remove one to
  // make them match the selected anchors' index positions in the NodeList
  const value1 = Number(select1.value) - 1;
  const value2 = Number(select2.value) - 1;

  if (value1 === value2) {
    // If the chosen anchors are both the same, set both anchor
    // names on the same anchor
    anchors[value1].style.anchorName = "--myAnchor1, --myAnchor2";
  } else {
    // If they are not the same, set the anchor names separately
    // on each selected anchor
    anchors[value1].style.anchorName = "--myAnchor1";
    anchors[value2].style.anchorName = "--myAnchor2";
  }
}

结果

从下拉菜单中选择不同的值，更改元素相对于其定位的锚点。

规范

规范
CSS 锚点定位 # position-anchor

浏览器兼容性

BCD 表格只在浏览器中加载