内嵌区域

inset-area 属性通过声明行和列，在 锚点元素 周围创建一个虚拟的 3×3 网格，并使用它将 锚点定位 的（或“目标”）元素设置在网格的一个区域或跨越网格的多个区域。

.target {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom end;
}

对于大多数用例，例如创建工具提示，使用 inset-area 属性来放置锚点定位的元素就足够了。 如果您需要更精细的控制，可以使用 anchor() 函数来获取其他方法来定位锚点定位的元素。

inset-area 属性对普通元素不会有任何影响。 这是因为它属于 CSS 锚点定位模块，它是一组相互协作的许多功能，用于将我们称为“目标”的元素定位到我们称为“锚点”的另一个元素。

注意：根据 规范，inset-area 属性现在名为 position-area，但已发布 Position Anchor 的浏览器（迄今为止只有 Chromium）继续使用 inset-area，因此在它可能发生变化时要注意！

语法

inset-area: auto | <inset-area>

• 初始值: none
• 应用于: 具有 默认锚点元素 的定位元素
• 继承: 否
• 百分比: N/A
• 计算值: 如指定
• 规范顺序: 根据语法
• 动画: 待定（尚未指定）

值

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

/* Logical values */
inset-area: end start;
inset-area: block-start inline-end;
inset-area: self-block-start self-inline-end;

/* Physical Values */
inset-area: top center;
inset-area: bottom left;
inset-area: x-start y-end;

/* Span Values */
inset-area: center span-left; /* covers anchor */
inset-area: span-bottom right;
inset-area: top span-all;

/* Single Values */
inset-area: center;
inset-area: left;

• none: .target 元素不会移动，也不会相对于锚点元素定位。

• <inset-area>: 将 .target 放置在由行和列选择的网格区域上。 如果目标与任何锚点没有匹配的 positon-anchor/anchor-name 关系，则此值无效。

理解 inset-area 是什么

如前所述，inset-area 属性创建一个虚拟的 3×3 网格，我们可以用它来沿着锚点元素的边缘定位目标元素。

这个表示虽然对于理解锚点定位的概念很有用，但它并不是网格外观的精确表示。 实际上，网格根本不是对称的，而是被每个轴上的四条虚线包含，其中包括

1. 目标的包含块的 start。
2. 锚点元素的 start 或 anchor(start)。
3. 锚点元素的 end 或 anchor(end)
4. 目标的包含块的 end。

由于目标元素必须是绝对定位的（即 position: absolute），它们的包含块是视窗，使得默认网格看起来更像这样

现在我们知道了网格的真实样子，并且已经掌握了使用匹配的 anchor-name/position-anchor 属性链接元素，下一步就是将目标元素移动到锚点周围。 一种方法是使用目标元素的内边距属性（top, right, bottom, left 等），但有时我们希望将它放置在“锚点的左上角”或“锚点的旁边”，而不诉诸内边距属性。

inset-area 属性替您完成了这些工作，将目标元素放置在指定的网格区域上。 它通过使用逻辑值（例如 start 和 end，依赖于书写模式）；物理值（例如 top、left、right、bottom）以及共享值 center 来设置网格的行和列。

因此，如果我们想将目标元素放置在右上角，例如，我们可以在 LTR 包含块上写入 inset-area: top right 或 inset-area: start end。

.target {
	position: absolute;
	position-anchor: --my-anchor;

	inset-area: top right;
	/* or */
	inset-area: start end;
}

要将目标元素放置在两个相邻的网格区域中，我们可以对任何值（不是 center）使用 span- 前缀，一次一个行或列。

.target {
	position: absolute;
	position-anchor: --my-anchor;

	inset-area: span-top left;
	/* or */
	inset-area: span-start left;
}

最后，我们可以使用 span-all 值跨越三个相邻的网格区域。

.target {
	position: absolute;
	position-anchor: --my-anchor;

	inset-area: bottom span-all;
	/* or */
	inset-area: end span-all;
}

值的顺序无关紧要……除非我们正在使用逻辑属性

值不止表面上看起来的那些。 例如，逻辑值指的是目标元素的包含块书写模式，因此需要 self- 前缀来选择目标元素自身的书写模式。

.target {
  position: absolute;
  position-anchor: --my-anchor;

  inset-area: self-end self-start;
}

您可能还注意到，inset-area 属性对物理值的顺序没有严格的要求。 因此，从技术上讲，我们可以交换这些值的顺序，因为它们都表示相同的意思。 例如

.target {
  inset-area: top left;
  /* same as: */
  inset-area: left top
}

但是等等！如果我们使用逻辑属性值，那么顺序就极其重要。 这是因为逻辑属性值的方位取决于一个人的书写模式（例如，从右到左）。

.target {
  inset-area: start end; /* equates to "top" and "right" in LTR writing mode */
  /* is opposite of: */
  inset-area: end start /* equates to "bottom" and "left" in RTL writing mode */
}

这是因为物理值不会在它们所指的轴上产生歧义：top 将始终指网格的“顶行”，但逻辑值会产生歧义，并且取决于浏览器的书写模式的上下文，因此第一个逻辑值设置行，第二个值设置列。

使用“模棱两可”和“明确”的逻辑值

只要我们明确地说明值所指的方向，就可以互换使用这些值，方法是在值前加上 inline- 或 block-。

.target {
  position: absolute; /* required */
  position-anchor: --my-anchor;

  inset-area: inline-end block-start;
  /* or */
  inset-area: block-start inline-end;
}

CSS 知道每个值的方向，因为我们非常明确地说明了：这个值在内联方向上，而另一个值在块方向上。 因此，顺序对 CSS 来说无关紧要，因为无论哪种方式都相同！

但是，如果我们的值不是那么具有声明性，而是对它们所指的方向更模棱两可呢？ 一个“模棱两可”的值将是 start 或 end，因为它们没有明确说明是关于内联方向还是块方向。 因此，例如，如果我们混合了模棱两可的和明确的值，例如这样

.target {
  inset-area: block-end start;
}

…CSS 将评估模棱两可的 start 值为 inline-start，因为块方向已经通过明确的 block-end 值进行了处理。

如果我们声明两个模棱两可的逻辑值

.target {
  inset-area: start start;
}

…那么 CSS 将在块方向上设置第一个值，在内联方向上设置第二个值，或者

.target {
  inset-area: block-start inline-start;
}

单个值暗示 span-all 关键字

但是，假设我们只提供一个值，并且它是一个明确的值，例如 top

.target {
  inset-area: top;
}

CSS 将沿着锚点元素的 top 边缘定位 .target 元素，但将其跨越所有列以占用完整空间。 因此，实际上，声明单个明确的 top 值会隐式地为元素设置 span-all 关键字，这意味着它与写入以下内容相同

.target {
  inset-area: top span-all;
}

演示

规范

inset-area 属性在 CSS 锚点定位模块级别 1 规范中定义，该规范在撰写本文时处于工作草案状态。 这意味着在该功能成为正式的候选推荐以供实施之前，可能会发生很多变化。

浏览器支持

更多信息和教程

• “CSS 锚点定位” (CSSWG)
• “inset-area 文档” (MDN)
• “介绍 CSS 锚点定位 API” (Una Kravets)
• “上次 CSSWG 会议后我感到兴奋的 CSS 东西” (Juan Diego Rodríguez)

相关