如何在不更改其他元素的定位单位的情况下实现响应线性梯度？

Question

响应式的意思是，背景的渐变过渡将始终处于所选透明元素的高度，因为在透明元素的背景中具有渐变过渡是一种设计特征。

如果我在chrome代码检查器中查看此codepen代码段并以不同的分辨率模拟视图，则过渡将在透明元素的下方或上方。

如何在不改变透明元素的定位单位类型的情况下，在所有分辨率下完全在透明元素下获得过渡？

我也尝试将％用作渐变停止，但不会响应。

为简单起见，我使用标题作为透明元素，但实际上是flexbox行，位于网站标题下方和页面内容上方，因此更改该行的定位单位似乎是不可能的。

h1 {
  padding-top: 35px;
  padding-left: 50%;
  font-size: 10vh;
  color: #00000020;
}

div {
  height: 700px;
  background: linear-gradient(to bottom, #f19585, #f19585 20vh, #f9e314 26vh, #f9e314 60vh, #9a080f 61vh, #9a080f);
}

<div>
  <h1>Hello</h1>
</div>

（codepen）