如何使子元素的linear gradient与父元素渐变保持同起点对齐？

开发应用时，需要让多个子元素的线性渐变与父元素的渐变完全对齐，同时保留这些子元素用于遮挡后方元素，现有代码无法实现该效果，求解决方法。

当前效果代码 #

main {
  --lin-grad-1: linear-gradient( 135deg, #f00 0%, #00f 100%)
}

main {
  position: relative;
  width: 700px;
  height: 400px;
  background: var(--lin-grad-1);
}

.test {
  position: absolute;
  width: 50px;
  height: 50px;
  background: var(--lin-grad-1);
}

.p1 {
  top: 50px;
  left: 50px;
}

.p2 {
  top: 120px;
  left: 20px
}

.p3 {
  top: 70px;
  left: 250px;
}

.p4 {
  top: -50px;
  left: 200px;
}

<main>
  <div class='test p1'></div>
  <div class='test p2'></div>
  <div class='test p3'></div>
  <div class='test p4'></div>
</main>

期望效果说明 #

子元素的渐变需与父元素渐变完全对齐，视觉上子元素如同父元素渐变的一部分，同时保留子元素的独立存在以实现遮挡功能。

解决方案代码 #

通过为子元素添加background-position属性，利用CSS变量计算偏移量，让子元素的渐变位置与父元素对应：

main {
  --lin-grad-1: linear-gradient( 135deg, #f00 0%, #00f 100%)
}

main {
  position: relative;
  width: 700px;
  height: 400px;
  background: var(--lin-grad-1);
}

.test {
  position: absolute;
  width: 50px;
  height: 50px;
  background: var(--lin-grad-1);
  /* 根据子元素的top/left反向偏移渐变位置 */
  background-position: calc(-1 * var(--left)) calc(-1 * var(--top));
}

.p1 {
  --top: 50px;
  --left: 50px;
  top: var(--top);
  left: var(--left);
}

.p2 {
  --top: 120px;
  --left: 20px;
  top: var(--top);
  left: var(--left);
}

.p3 {
  --top: 70px;
  --left: 250px;
  top: var(--top);
  left: var(--left);
}

.p4 {
  --top: -50px;
  --left: 200px;
  top: var(--top);
  left: var(--left);
}

<main>
  <div class='test p1'></div>
  <div class='test p2'></div>
  <div class='test p3'></div>
  <div class='test p4'></div>
</main>

原理说明 #

每个子元素通过CSS变量--top和--left存储自身的偏移值，再通过calc(-1 * var(--left))和calc(-1 * var(--top))反向调整渐变的背景位置，使得子元素的渐变起始点与父元素的渐变起始点对齐，最终实现视觉上的无缝衔接。

内容的提问来源于stack exchange，提问作者Gabriel d'Agosto