如何将父元素动态计算的left值传递给子元素？

要让子元素的left值始终是父元素left值的相反数，最可靠的方式是使用CSS自定义属性（变量），避免重复计算并保证数值同步。

修改后的代码： #

&.parent {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  @media only screen and (min-width: 758px) {
    /* 定义变量存储父元素的left值 */
    --parent-left: calc(50% + 100px);
    left: var(--parent-left);

    .caption {
      /* 子元素直接使用变量计算相反数 */
      left: calc(var(--parent-left) * -1);
    }
  }
}

为什么之前的方法不适用： #

• inherit：只会直接继承父元素的left值（即calc(50% + 100px)），无法自动取相反数，不符合需求。
• 手动写calc((50% + 100px) * -1)：虽然逻辑上是相反数，但如果后续父元素的left值需要调整，你得同时修改子元素的代码，容易出错；另外如果父元素和子元素的left参考坐标系不同（比如父元素相对视口定位，子元素相对父元素定位），可能导致计算出的像素值不一致，而用变量能彻底避免这个问题。

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