Html 当涉及到绝对定位时，另一种填充响应性web设计的方法

因此，我尝试将4行文字包装在div中，放在图像的某个位置

以下是与该图片相关的html和css代码：

    <div class="hero-img">
      <img src="img/welcome-hero.png" alt="Editor with Welcome Message">
      <div class="welcoming-animation">
        <span class="line-1 welcome-text">H</span>
        <span class="line-2 welcome-text">E</span>
        <span class="line-3 welcome-text">L</span>
        <span class="line-4 welcome-text">O</span>
      </div>

    </div>

 // CSS
    .hero-img{
      position:relative;
    }
    .hero-img img{
      display: block;
      margin:auto;
      margin-bottom:-5px;
    }
    .welcoming-animation{
      position:absolute;
      top:35px;
      left:68px;
    }
    .welcome-text{
      display: block;
    }

H
E
L
O
//CSS
.英雄img{
位置：相对位置；
}
.英雄img img{
显示：块；
保证金：自动；
边缘底部：-5px；
}
.欢迎动画{
位置：绝对位置；
顶部：35px；
左：68px；
}
.欢迎辞{
显示：块；
}

如图所示，我想把这行文字放在终端图像的一角，使其具有响应性。我开始意识到，如果我使用绝对定位，那么要使其响应（必须跟踪窗口的每一次小调整的不同位置）将是一件痛苦的事情

---

我想问一下CSS专家，是否有其他方法来定位这段文字，这样我就可以轻松地使其响应

一种快速而肮脏的方法是使用scale（）css函数将元素缩小到某个断点之后

此方法可能会导致文本出现抗锯齿问题（轻微模糊），使其看起来不太理想

---

或者，您可以用svg替换欢迎动画div，并对其设置动画。svg在调整大小时将保留其尺寸和位置，因此您不必处理字符的绝对位置

---

PS：我也尝试过使用%测量值。您能否指定要如何使其响应，例如在台式机、平板电脑和移动设备上的外观？由于单词“HELO”是垂直对齐的，所以即使在响应视图中，也不需要重新定位