position-anchor

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

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

语法

css

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

/* 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 属性中列出的名称一致。这被称为默认锚点指定符。

描述

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

要相对于锚点元素定位一个元素，该定位元素需要三个特性：关联、位置和方位。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 锚点定位指南。

正式定义

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

正式语法

position-anchor = 
  auto           |
  <anchor-name>  

<anchor-name> = 
  <dashed-ident>

示例

请参阅 anchor-name 文档中的基本用法和额外的 position-anchor 示例。

使用滑块的滑块钮作为锚点

在此示例中，一个 <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 属性的值，并为其指定一个 fixed 的 position 值。这些步骤将 <output> 与滑块钮关联起来。

最后，我们使用带有 anchor() 值的 left 和 top 属性，将 <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: --my-anchor1, --my-anchor2;
}

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

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

css

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

#infobox2 {
  position-anchor: --my-anchor2;
  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 = "--my-anchor1, --my-anchor2";
  } else {
    // If they are not the same, set the anchor names separately
    // on each selected anchor
    anchors[value1].style.anchorName = "--my-anchor1";
    anchors[value2].style.anchorName = "--my-anchor2";
  }
}

结果

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

规范

规范
CSS 锚点定位 # position-anchor

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面的最后修改时间是 ⁨2025 年 8 月 13 日⁩，由 MDN 贡献者们修改。

在 GitHub 上查看此页面 • 报告此内容的问题