如何用CSS通过数学公式绑定两个div的位置实现联动？

完全可以实现这种需求，核心思路是通过元素嵌套+CSS变量+相对定位来实现两个div的位置绑定，同时满足比例关系。

实现步骤 #

• 将蓝色div作为红色div的子元素，红色div的位置变化会自动带动蓝色div同步移动，无需单独维护位置。
• 用CSS变量定义红色div的关键尺寸（比如高度），方便蓝色div基于该尺寸计算偏移量，满足A = 0.06 * B的比例要求（假设A是蓝色div相对于红色div底部的偏移距离，B是红色div的高度）。
• 将蓝色div设置为绝对定位，相对于父元素（红色div）进行定位，精准控制相对位置。

修改后的完整代码 #

.red-div {
  /* 定义CSS变量存储红色div的高度 */
  --red-height: 45vh;
  top: 10vh;
  height: var(--red-height);
  position: absolute;
  aspect-ratio: 0.562;
  left: 50%;
  transform: translate(-50%, 0);
  background: red;
  border-radius: 60%;
  /* 为子元素的绝对定位提供参考 */
  position: relative;
}

.blue-div {
  /* 计算偏移量：红色div底部 + 0.06*红色高度 */
  top: calc(100% + 0.06 * var(--red-height));
  height: 70vh;
  position: absolute;
  aspect-ratio: 0.6;
  left: 50%;
  transform: translate(-50%, 0);
  background: blue;
}

<div class="red-div">
  <div class="blue-div"></div>
</div>

补充说明 #

如果C = 0.06 × D中的D是红色div的宽度，你可以用同样的方式定义--red-width变量（或者通过aspect-ratio计算：var(--red-height) / 0.562），然后给蓝色div的水平偏移或尺寸应用该比例。

内容的提问来源于stack exchange，提问作者Saw