设置 position-area
position-area 属性提供了一种替代 anchor() 函数来相对于锚点定位元素的方法。position-area 属性基于一个 3x3 的网格概念，其中锚点元素是中心单元格。position-area 属性可用于将锚点定位元素放置在九个单元格中的任何一个，或者使其跨越两个或三个单元格。
网格瓷砖被分为行和列。
三行由物理值 top、center 和 bottom 表示。它们也有逻辑等效值，如 start、center 和 end，以及坐标等效值，如 y-start、center 和 y-end。
三列由物理值 left、center 和 right 表示。它们也有逻辑等效值，如 start、center 和 end，以及坐标等效值，如 x-start、center 和 x-end。
中心单元格的尺寸由锚点元素的包含块定义，而中心单元格与网格外边缘之间的距离由定位元素的包含块定义。
position-area 属性值由一到两个基于上述行和列的值组成，并提供跨越选项来定义元素应定位的网格区域。
例如
你可以指定两个值，将定位元素放置在特定的网格单元中。例如：
top left（逻辑等效为 start start）会将定位元素放置在左上角的单元格中。
bottom center（逻辑等效为 end center）会将定位元素放置在底部中央的单元格中。
你可以指定一个行或列的值，加上一个 span-* 值。第一个值指定了放置定位元素的行或列，初始时将其放置在中心，另一个值指定了要跨越的列的数量。例如：
top span-left 会使定位元素被放置在顶行，并跨越该行的中心和左侧单元格。
y-end span-x-end 会使定位元素被放置在 y 轴的末端，并跨越该列的中心和 x 轴末端的单元格。
block-end span-all 会使定位元素被放置在块结束行，并跨越该行的内联起始、中心和内联结束单元格。
如果你只指定一个值，效果会因设置的值而异：
物理侧边值（top、bottom、left 或 right）或坐标值（y-start、y-end、x-start、x-end）的作用如同另一个值是 span-all。例如，top 的效果与 top span-all 相同。
逻辑侧边值（start 或 end）的作用如同另一个值被设置为相同的值；例如，start 的效果与 start start 相同。
center 值的作用如同两个值都设置为 center（即 center center）。
注意： 有关所有可用值的详细描述，请参阅
让我们来演示一些这样的值；这个例子使用了与前一个例子相同的 HTML 和基础 CSS 样式，只是我们增加了一个
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
elementum sagittis vitae et.
This is an information box.
Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
aliquam.
Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
accumsan.
.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;
}
.anchor {
anchor-name: --my-anchor;
}
body {
width: 50%;
margin: 0 auto;
}
form {
background: white;
border: 1px solid black;
padding: 5px;
}
select {
display: block;
margin-top: 5px;
}
form {
position: fixed;
top: 0;
right: 2px;
}
信息框被赋予固定定位，并使用 CSS 与锚点关联。加载时，它被设置为通过 position-area: top; 绑定到锚点，这使其位于位置区域网格的顶部。一旦你从
.infobox {
color: darkblue;
background-color: azure;
border: 1px solid #dddddd;
padding: 10px;
border-radius: 10px;
font-size: 1rem;
}
css.infobox {
position: fixed;
position-anchor: --my-anchor;
position-area: top;
}
我们还包含了一个简短的脚本，用于将从
jsconst infobox = document.querySelector(".infobox");
const selectElem = document.querySelector("select");
selectElem.addEventListener("change", () => {
const area = selectElem.value;
// Set the position-area to the value chosen in the select box
infobox.style.positionArea = area;
});
尝试从