锚点定位

https://www.zhangxinxu.com/wordpress/2024/06/css-anchor-positioning-api/

/* CSS锚点定位 https://segmentfault.com/a/1190000045077175 */

/* 隐式锚点 适用于 1v1 */
.trigger {
  anchor-name: --my-anchor;
}

.target {
  position-anchor: --my-anchor;
  left: anchor(left);
  /* 居中对齐 */
  /* justify-self: anchor-center;  */
  /* inset-area: bottom; */
}

/* 显示锚点 适用于多元素定位 */
.trigger1 {
  anchor-name: --anchor-a;
}

.trigger2 {
  anchor-name: --anchor-b;
}

.target {
  position: absolute;
  left: anchor(--anchor-a right);
  right: anchor(--anchor-b left);
}